Twitter Bootstrap spans overflowing

Question

http://jsfiddle.net/jgehrs/MgcDU/3103/

I have this block of code, which should result in 4 equally sized spans all lined up horizontally, but as you can see, the 4th block is pushed down to a new row. I've used bootstrap for a few days now, and this is the first time I've seen this.

<div id='middle' class='row'>
  <div class='span3'>
    <div>1</div>
  </div>
  <div class='span3'>
    <div>2</div>
  </div>
  <div class='span3'>
    <div>3</div>
  </div>
  <div class='span3'>
    <div>4</div>
  </div>

Edit: Here is a jsFiddle showing the problem.

Answer 1

Fluid layout works with percentages. You can try <div class="row-fluid"> that fixed it for me.