title: Bootstrap span breaking into a new line, not aligning with other spans in a row
body: <p>I have some simple markup that looks like the following:</p>
  
  <pre><code>&lt;div class="row" id="features"&gt;
          &lt;div class="span3 divider"&gt;
              &lt;div class="featureicon"&gt;&lt;i class="icon-trophy"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;h3&gt;some header&lt;/h3&gt;
              &lt;p&gt;some text&lt;/p&gt;
          &lt;/div&gt;        
          &lt;div class="span3 divider"&gt;
              &lt;div class="featureicon"&gt;&lt;i class="icon-comments"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;h3&gt;some header&lt;/h3&gt;
              &lt;p&gt;some text.&lt;/p&gt;
          &lt;/div&gt;       
          &lt;div class="span3 divider"&gt;
              &lt;div class="featureicon"&gt;&lt;i class="icon-male"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;h3&gt;another header&lt;/h3&gt;
              &lt;p&gt;more text&lt;/p&gt;
          &lt;/div&gt;
           &lt;div class="span3 divider"&gt;
              &lt;div class="featureicon"&gt;&lt;i class="icon-wrench"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;h3&gt;yet another header&lt;/h3&gt;
              &lt;p&gt;some more text&lt;/p&gt;
            &lt;/div&gt;
          &lt;div class="span3"&gt;
            &lt;div class="featureicon"&gt;&lt;i class="icon-male"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;h3&gt;last header&lt;/h3&gt;
              &lt;p&gt;last bit of text&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;&lt;!--end row--&gt;
  </code></pre>
  
  <p>Without me adding that final span3 div, everything looks and feels great. The problem is, I need 5 span's in this row and not 4. There is certainly room on the screen for it to fit, but it just drops to the next row instead. What's the best way to make all five span's in Twitter bootstrap fit on one physical row?</p>