Bootstrap 4 columns and rows producing unwanted padding [duplicate]

Answer 1

Add the class no-gutters to each div class="row" to remove the spaces between the col-* elements

See the Bootstrap documentation about gutters.

<div class="row no-gutters">
    <div style="background-color:#aaa" class="col-sm-3">a</div>
    <div style="background-color:#bbb" class="col-sm-3">b</div>
    <div style="background-color:#ccc" class="col-sm-3">c</div>
    <div style="background-color:#ffffd" class="col-sm-3">d</div>
</div>

Here a working jsfiddle that also removes the "visual padding" once the images doesn't fit 100% into the container.

Answer 2

Add below class hope it works for you.

.margin0-padding0 {
    margin-left: 0px !important;
    margin-right: 0px !important;
    padding: 0px !important;
}

Answer 3

Bootstrap : "The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns."

You should try to do :

<div class="row no-gutters">
    <div class="col-6">
       <img ... />
    </div>
    <div class="col-6">
       <img ... />
    </div>
</div>