title: Bootstrap 2.3 - unwanted vertical space between div rows
body: <p>I'm using Bootstrap 2.3 and Foundation 5 and both are loaded on the page. There are no Firebug errors. Here's the HTML that is rendered and a screenshot. Why is there so much vertical space between the div rows?</p>
  
  <p>HTML:</p>
  
  <pre><code>   &lt;div class="row-fluid"&gt;
             &lt;div class="span3 offset2"&gt;&lt;span id="makemeboldlbl" class="label label-warning"&gt;Genre&lt;/span&gt;&lt;/div&gt;
             &lt;div class="span3"&gt;&lt;span id="makemeboldlbl" class="label label-warning"&gt;Manager&lt;/span&gt;&lt;/div&gt;
             &lt;div class="span3"&gt;&lt;span id="makemeboldlbl" class="label label-warning"&gt;ts_update&lt;/span&gt;&lt;/div&gt;
             &lt;div class="span1"&gt;&amp;nbsp;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class='row-fluid'&gt;
     &lt;div class='span3 offset2'&gt;&lt;a id='genre1' data-name='genre' data-type='text' data-pk='1' data-url='/updateGenre' data-title='Enter Genre'&gt;American&lt;/a&gt;&lt;/div&gt;
     &lt;div class='span3'&gt;jborn&lt;/div&gt;
     &lt;div class='span3'&gt;0000-00-00 00:00:00&lt;/div&gt;
     &lt;div class='span1'&gt;&lt;img src='./images/delete.png' id='delete_1' height='25' width='25' title='Remove' /&gt;&lt;/div&gt;
     &lt;div class='span2'&gt;&amp;nbsp&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='row-fluid'&gt;
     &lt;div class='span3 offset2'&gt;&lt;a id='genre2' data-name='genre' data-type='text' data-pk='2' data-url='/updateGenre' data-title='Enter Genre'&gt;Asian&lt;/a&gt;&lt;/div&gt;
     &lt;div class='span3'&gt;jborn&lt;/div&gt;
     &lt;div class='span3'&gt;0000-00-00 00:00:00&lt;/div&gt;
     &lt;div class='span1'&gt;&lt;img src='./images/delete.png' id='delete_2' height='25' width='25' title='Remove' /&gt;&lt;/div&gt;
     &lt;div class='span2'&gt;&amp;nbsp&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br/>
  <img src="https://i.stack.imgur.com/UrZvo.jpg" alt="screenshot of the problem"></p>
  
  <p><br/>
  Here's updated HTML:</p>
  
  <pre><code>&lt;div class="row-fluid"&gt;&lt;div class="span12 text-center"  id="genres"&gt;
     &lt;div class="row-fluid"&gt;
             &lt;div class="span2"&gt;&lt;span id="makemeboldlbl" class="label label-warning"&gt;Genre&lt;/span&gt;&lt;/div&gt;
             &lt;div class="span2"&gt;&lt;span id="makemeboldlbl" class="label label-warning"&gt;Manager&lt;/span&gt;&lt;/div&gt;
             &lt;div class="span3"&gt;&lt;span id="makemeboldlbl" class="label label-warning"&gt;ts_update&lt;/span&gt;&lt;/div&gt;
             &lt;div class="span1"&gt;&amp;nbsp;&lt;/div&gt;
     &lt;/div&gt;
     &lt;? echo $data ?&gt;
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><br/>
  Why is it not centering the rows while it's centering the header and Add New form?
  <br/>
  <img src="https://i.stack.imgur.com/8IpaY.jpg" alt="new problem: centering"></p>