Twitter bootstrap grid system - 4 span3's results in 2 lines

Question

I am using twitter bootstrap and want to have 4 'how it works' sections across a single line within a container. According to twitter bootstrap, within a container, there are 12 spans so this shouldn't be an issue.

For some reason, when i create 4 div's, it results in the 4th div going to the next line. My screen width is greater than the width where it should stack it vertically, so that's not the issue.

Any ideas?

CSS HERE

.howitworks{
        text-align: center;
        margin-top: 30px;
        }

.howitworks p{
        margin-left:20%;
        padding-bottom: 40px;}

.howitworks h3{
        padding-top:25px;
            }

#howitworksdetail{
        border: thin solid #0d9e49;
        border-bottom-width: 3px;
        border-bottom: solid #0d9e49;
        min-height: 220px;
        margin-top: 60px;
            }

HTML HERE

<div class = "container">
 <div class = "howitworks">
   <div class = 'span3', id= 'howitworksdetail'>
     <h3 class = "text-center">header</h3>
     <p class = "span2 text-center">stuff.</p>
   </div>
   <div class = 'span3', id= 'howitworksdetail'>
     <h3 class = "text-center">header</h3>
     <p class = "span2 text-center">stuff</p>
   </div>
   <div class = 'span3', id= 'howitworksdetail'>
     <h3 class = "text-center">header</h3>
     <p class = "span2 text-center">stuff</p>
   </div>
   <div class = 'span3', id= 'howitworksdetail'>
     <h3 class = "text-center">header</h3>
     <p class = "span2 text-center">stuff</p>
   </div>
 </div>
</div>

I tried eliminating the border and that did not do it either. Thanks

Answer 1

It looks like you are missing <div class="row"> in your code. You'll notice on the Bootstrap Grid System page that it requires the class row in order to create a row with those 12 columns.

Also, you have the class span2 on your <p> elements, but I believe you only want to apply the grid classes to <div> elements. Hope this helps!