White space left and right around images when using bootstrap col
<p>I have a row with 3 images.<br>
Image left has white space on the left side.<br>
Image right has white space on the right side.</p>

<p>How can I fix this so I don't have any with space on the left and right side?</p>

<p>See my code below:</p>

<p>The background is orange in the image so it's better visible.</p>

<p>HTML:</p>

<pre><code>&lt;div class="container section"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-offset-1 col-md-10 featured"&gt;

      &lt;div class="col-md-4 img-featured-1"&gt;
        &lt;%= image_tag("featured-1.jpeg", class: "img-responsive") %&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 img-featured-2"&gt;
        &lt;%= image_tag("featured-2.jpeg", class: "img-responsive") %&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 img-featured-3"&gt;
        &lt;%= image_tag("featured-3.jpeg", class: "img-responsive") %&gt;
      &lt;/div&gt;

    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.featured {
  background-color: orange;
}
.img-featured-1 {
  width: 33.33333%;
  float: left;
}
.img-featured-2 {
  width: 33.33333%;
}
.img-featured-3 {
  width: 33.33333%;
  float: right;
}
</code></pre>

<p><a href="http://i.stack.imgur.com/6BAaL.png" rel="nofollow">See the image</a></p>