fit border around image bootstrap - html

Question

I am currently trying to fit a border around an image and unfortunately bootstrap isn't making it easy. It seems that they add padding in the columns which is preventing the border from fitting. I am not sure if there is a way to do it without removing the padding bootstrap provides. Here is my code
<section class="part2">
<div class="container">
<div class="row">
<img src="/wp-content/themes/creativeforces/images/kid2.jpg" class="resize-image col-sm-4" id="image1" alt="">
<img src="/wp-content/themes/creativeforces/images/kid2.jpg" class="resize-image col-sm-4" alt="">
<img src="/wp-content/themes/creativeforces/images/kid2.jpg" class="resize-image col-sm-4" alt="">
</div>
<div class="row">
<div>
<p class="text-center col-md-4">Teach</p>
<div>
<p class="text-center col-md-4">Read</p>
</div>
<div>
<p class="text-center col-md-4">Play<p>
</div>
</div>
</div>
</section>
.part2{
background-color: #EEEEEE;
// width:100%;
margin-top: 30px;
padding-bottom: 20px;
padding-top: 20px;
}
#image1{
border: 3px solid #000;
}
As you can see the border is not properly fitted around the image.
Any help would be appreciated!

Answer 1

I have had this issue before and I took the padding off the image. It has never affected my design in any way.
As you may know you would simply add:
#image1{
border: 3px solid #000;
padding: 0;
}
I have also done a bit of digging after you asked your question and it seems like someone else suggested removing the padding.
Bootstrap unwanted image padding