title: Bootstrap 3 responsive thumbnails not aligning properly in Chrome or Firefox
body: <p>I have built a grid of thumbnails in Bootstrap 3. In the large and medium columns, they're aligned in 3 columns across and in the small and xsmall grids 2 across. In Safari the thumbnail columns and rows work great in all the grid systems. In Chrome and Firefox, in the large and medium column grids, the second row of thumbnails get pushed over so that the first row is "blank" and the thumbnails start in the second (middle) row. The small and xsmall columns work as expected. Here is the code:</p>
  
  <pre><code>&lt;section class="container gallery"&gt;
   &lt;div class="row"&gt;
    &lt;div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-12"&gt;
      &lt;div class="row"&gt;
  
        &lt;div class="col-lg-4 col-md-4  col-sm-4 col-xs-6"&gt;
            &lt;a href="#"&gt;&lt;img class="img-responsive img-thumbnail" src="1-tn.jpg" alt=""&gt;&lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"&gt;
          &lt;a href="#"&gt;&lt;img class="img-responsive img-thumbnail" src="2-tn.jpg" alt=""&gt;&lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"&gt;
          &lt;a href="#"&gt;&lt;img class="img-responsive img-thumbnail" src="3-tn.jpg" alt=""&gt;&lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"&gt;
          &lt;a href="#"&gt;&lt;img class="img-responsive img-thumbnail" src="4-tn.jpg" alt=""&gt;&lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"&gt;
          &lt;a href="#"&gt;&lt;img class="img-responsive img-thumbnail" src="5-tn.jpg" alt=""&gt;&lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"&gt;
          &lt;a href="#"&gt;&lt;img class="img-responsive img-thumbnail" src="6-tn.jpg" alt=""&gt;&lt;/a&gt;
        &lt;/div&gt;
  
        &lt;div class="col-lg-4 col-md-4 col-sm-4 col-xs-6"&gt;
          &lt;a href="#"&gt;&lt;img class="img-responsive img-thumbnail" src="7-tn.jpg" alt=""&gt;&lt;/a&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt; 
  </code></pre>
  
  <p>So I assumed that by since I didn't set a new row tag in for the second column, I am not getting Bootstrap's row default -15px left and right padding and the overall width of my row is too large. When I go into Chrome's developer tools and turn off the col-lg-10 left or right padding, the thumbnails align properly, confirming my hunch. Yet I don't want to set rows explicitly since the number of thumbnails in a row will vary depending on which size grid is called. I can set up media queries for each size gallery but that seems clunky. I did try to add a css rule <code>body#home .gallery .col-lg-10, body#home .gallery .col-md-10</code> and it worked for the large columns but not the medium columns. I have my img tag set to height: auto; max-height: 100%;. Anyone have any solutions?</p>