title: Twitter bootstrap cannot pad container with fixed grid
body: <p>I am trying to get some padding (a gutter) between the container and the grid of a Twitter bootstrap site. </p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="span4"&gt;
        Some narrow content
      &lt;/div&gt;
      &lt;div class="span8"&gt;
        Some wider content
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I put a padding of 10px on .container, it all breaks because I'm narrowing the space for the fixed grid that uses pixel widths.. I get that, so I tried the fluid layout.</p>
  
  <p>This formats the grid correctly with the gutter that I want - however... it causes a problem somewhere else. In my narrow content I actually have this (a's and img's removed for brevity, but they are all the same size):</p>
  
  <pre><code> &lt;ul class="thumbnails"&gt;
     &lt;li class="span2"&gt;...&lt;/li&gt;
     &lt;li class="span2"&gt;...&lt;/li&gt;
     &lt;li class="span2"&gt;...&lt;/li&gt;
     &lt;li class="span2"&gt;...&lt;/li&gt;
     &lt;li class="span2"&gt;...&lt;/li&gt;
     &lt;li class="span2"&gt;...&lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>In a fixed layout, this wraps perfectly into a nice square 2x3 grid of pictures. In a fluid layout, I get 2 images on the top row, and then a single one indented slightly the rest of the way down - my pretty thumbnail grid is broken. Some research reveals that fluid layout has dynamic margins on the thumbnails and the first one is made to fit with this special CSS code:</p>
  
  <pre><code> .row-fluid [class*="span"]:first-child {
     margin-left: 0;
   }
  </code></pre>
  
  <p>Since this obviously doesn't apply to the first image in the second row, it gets the same margin as the other thumbnails (for spacing) and line up with the top row.</p>
  
  <p>So I'm looking for a solution to either problem. I was hoping to use a fixed layout, but if someone can solve the thumbnail problem I'll happily use a fluid one.</p>
  
  <p>Anyone who has run into this have a solution?</p>
  
  <p>Cheers!</p>