How to align columns in foundation

Question

I have finally started to use foundation and it's great. So I was just testing out an example and I noticed that if only have two columns in a row it looks like this:

I would have thought that "Box B" would have been next to "Box A". How do I align it to the left? I haven't read too much into the documentation (as I should be), but I thought I'd ask.

In case you needed the code (the code is given when you download foundation):

<div class="row">
     <div class="large-4 columns">
         <div class="panel">
             <p>BOX A</p>
         </div>
     </div>
    <div class="large-4 columns">
        <div class="panel">
            <p>BOX B</p>
        </div>
    </div>

</div>

Thanks,

Nick

Answer 1

You can add the .end class to column B to get it to align to the left.

<div class="large-4 columns end">
    <div class="panel">
        <p>BOX B</p>
    </div>
</div>

Source: http://scotch.io/tutorials/css/understanding-zurb-foundation-5s-grid-system