fit border around image bootstrap

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