Skeleton Boilerplate: Columns are stacking on top of each other but I want them side by side?

I'm using Skeleton to build a small one page website.

My design is divided as 5 columns left, 3 columns in the middle and 4 to the right.

So I started by adding the first 5 columns to the left and the 3 in the middle and 4 to the right, and gave them a black background with CSS to see the effect.

What happens is that the columns are not stacked one beside the other, they are stack on top of each-other and are 960px in width!

I thought the whole reason of being of Skeleton was to automatically stack columns side by side out of the box?

Am I missing something ? Thanks !

Markup:

<div class="container">
<div class="row">
      <div class="five-columns intro" style="margin-top: 25%">

    </div>

  </div>  

<div class="row">
      <div class="three-columns intro" style="margin-top: 25%">

    </div>

  </div>  

</div>

<div class="row">
      <div class="four-columns intro" style="margin-top: 25%">
    </div>
  </div>  
</div>

First of all, you have one div closing tag too many. Other than that, you are now putting all 'xxx-columns' tag on a separate row, you need to put them all in a single "row" div.

Like this:

<div class="container">
    <div class="row">
        <div class="five-columns intro" style="margin-top: 25%">
        </div>

        <div class="three-columns intro" style="margin-top: 25%">
        </div>

        <div class="four-columns intro" style="margin-top: 25%">
        </div>
    </div>
</div>