Remove weird space between images in bootstrap
<p>The code below shows a simple image grid but there is spacing that I do not want, how do I remove it?
The first block is my html, the second is my css, and the third is the output.</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="container"&gt;
&lt;div class="row paddingbottom"&gt;
    &lt;div class="col-md-3 col-md-offset-1"&gt;&lt;a href="#"&gt;&lt;img src="images/fb_edit.png"&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="col-md-3 col-md-offset-1"&gt;&lt;a href="#"&gt;&lt;img src="images/tw_edit.png"&gt;&lt;/a&gt;&lt;/div&gt;
    &lt;div class="col-md-3 col-md-offset-1"&gt;&lt;a href="#"&gt;&lt;img src="images/yt_edit.jpeg"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p><strong>CSS</strong></p>

<pre><code>.paddingbottom
{
  padding-bottom: 10px;
}
</code></pre>

<p><strong>Output</strong></p>

<p><img src="https://i.stack.imgur.com/JIdac.png" alt="the result I get back"></p>