title: Twitter Bootstrap - Position issue with row-fluid
body: <p>I'm currently building a website using Twitter bootstrap (which is amazing!). 
  I had the layout using:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="span6"&gt;&lt;/div&gt;
      &lt;div class="span6"&gt;&lt;/div&gt;
      &lt;div class="span6"&gt;&lt;/div&gt;
      &lt;div class="span6"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Which works great, I have 2 divs per row basically, and we didn't have to include a counter in our loop to get rid of the margins. It was perfect! But we decided to change our mind about having a fixed layout, so I switched from the .row to .row-fluid. And this is when the problem comes. </p>
  
  <p>I know have something like this:</p>
  
  <pre><code>&lt;div class="row-fluid"&gt;
      &lt;div class="span6"&gt;&lt;/div&gt;
      &lt;div class="span6"&gt;&lt;/div&gt;
      &lt;div class="span6"&gt;&lt;/div&gt;
      &lt;div class="span6"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>And the div's with .span6 work well for the first row, but then the margin-left on the .span6 are showing up starting from the second row</strong>, therefore the layout is, well, ...not good.</p>
  
  <p>I'm <strong>surprised it works amazing for fixed layout but not row-fluid</strong>. Is there a work-around for this?  I used this on all my site, so having to add counters for all of them would...too much work.</p>
  
  <p>Here is JS Fiddle:
  <a href="http://jsfiddle.net/denislexic/uAs6k/3/">http://jsfiddle.net/denislexic/uAs6k/3/</a></p>
  
  <p>Any help appreciated, thanks.</p>