Different spacing between images - html

Question

Using Bootstrap, I am trying to get a larger margin space on the left and right of the screen and a thin space between images. Attempted to individually target images and play around with the margin but that changes the image size and since different images has different margin sizes, the images are not even.
Attempted to target all the images to have the same margin but the gap is too much which is not what I want is there a way around this? Added images to show what I want and what I currently have. My code as follows:
Expected outcome (Large margin left and right, thin margin between images)
Current Outcome (No margin left and right, large margin between images)
HTMl
<div class="row">
<div class="row" class="top-img-custom">
<div class="text-center col-md-4">
<img class="img-responsive" src="http://via.placeholder.com/650x512" alt="Smiley face">
</div>
<div class="text-center col-md-4">
<img class="img-responsive" src="http://via.placeholder.com/650x512" alt="Smiley face">
</div>
<div class="text-center col-md-4">
<img class="img-responsive" src="http://via.placeholder.com/650x512" alt="Smiley face">
</div>
</div>
</div>
CSS
.top-img-custom{
margin-left: 20px;
margin-right: 20px;
}

Answer 1

To achieve expected result, use below CSS
.top-img-custom{
margin-left: 20px;
margin-right: 20px;
padding-left:20px;
padding-right:20px;
}
.text-center {
text-align: center!important;
padding: 1px;
}
img{
width:100%;
}
https://codepen.io/nagasai/pen/dzNGqv
And as I mentioned before use both classes in one class-

Answer 2

body{
background-color: #f2f2f2!important;
}
.top-img-custom{
margin:10px 25px!important;
}
.top-img-custom .text-center{
padding: 0 1px!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="row top-img-custom" >
<div class="text-center col-md-4 col-sm-4 col-xs-4">
<img class="img-responsive" src="https://www.w3schools.com/html/pic_mountain.jpg" alt="Smiley face">
</div>
<div class="text-center col-md-4 col-sm-4 col-xs-4">
<img class="img-responsive" src="https://www.w3schools.com/html/pic_mountain.jpg" alt="Smiley face">
</div>
<div class="text-center col-md-4 col-sm-4 col-xs-4">
<img class="img-responsive" src="https://www.w3schools.com/html/pic_mountain.jpg" alt="Smiley face">
</div>
</div>
</div>

Answer 3

This behaviour won't come totally easy to the bootstrap grid system - it is pretty much designed for 15px padding in each of its col- classes, and a negative margin on the containing row classes to compensate at the edges. Messing with those, it is pretty easy to get some accidental element wrapping or horizontal scrollbars.
My approach might be to leave the row and col- classes alone to size themselves, but give the contents of your col- classes a negative margin to fill more of the space. And you would have to be tricky if you didn't want this on the edge elements.
This css should work:
.top-image-custom .img-responsive {
margin-left: -12px;
margin-right: -12px;
}
If you don't want this on the edge elements then using some :first-of-type and :last-of-type selectors may help, or assign new classes in your html to differentiate.