Grid columns do not fill parent container

Question

I have a grid layout using Bootstrap 3, with rows containing varying numbers of columns. My expectation of the grid behaviour is that the margin between column items would change as the parent container width changes, resulting in a set of columns that take up the full width of the container.

Take, for example, the following simplified snippet:

<div class="container">
  <div class="row">
    <div class="col-lg-2"><img src="http://dummyimage.com/160x260/707070" /></div>
    <div class="col-lg-2"><img src="http://dummyimage.com/160x260/707070" /></div>
    <div class="col-lg-2"><img src="http://dummyimage.com/160x260/707070" /></div>
    <div class="col-lg-2"><img src="http://dummyimage.com/160x260/707070" /></div>
    <div class="col-lg-2"><img src="http://dummyimage.com/160x260/707070" /></div>
    <div class="col-lg-2"><img src="http://dummyimage.com/160x260/707070" /></div>
  </div>      
  <div class="row">
    <div class="col-lg-4"><img src="http://dummyimage.com/340x160/707070" /></div>
    <div class="col-lg-4"><img src="http://dummyimage.com/340x160/707070" /></div>
    <div class="col-lg-4"><img src="http://dummyimage.com/340x160/707070" /></div>
  </div>
</div>

This will give 2 rows - the top row with 6 columns will correctly fill the full available width of the parent container. The bottom row, with 3 columns, will have an extra margin of around 20px to the right of the last column.

Am I right in expecting the right most edge of the last column in a row to always be flush with the right most edge of its parent container? If so, what am I doing wrong, if not, what is the actual expected behaviour and how can I ensure all my columns align nicely on both sides?

You can see an example of this problem at http://www.bootply.com/anQ8pvgmJM

Answer 1

The problem comes from your pictures, not the cols, if you add img { width: 100% ; } to your CSS, you get the expected behaviour.

Answer 2

It aligns just fine. The math is wrong. See here:

http://www.bootply.com/9crxEwGQGa

And here:

http://getbootstrap.com/css/#grid