How to align the columns in the foundation

Question

Finally, I started using the foundation, and that's great. So I just tested the example, and I noticed that if it has only two columns, it looks like this:

I would think Box B would be next to Box A. How to align it to the left? I didn't read too much in the documentation (as it should be), but I thought I would ask.

If you need a code (the code is indicated at boot):

<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 align it 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

Answer 2

This is because the Foundation base grid must add up to 12.

Columns are created using the css classes: .small- #,. Medium- # and .large- #. #s must be added before 12, since Foundation uses 12 grid systems. Source: http://scotch.io/tutorials/css/understanding-zurb-foundation-5s-grid-system

Change classes to large-6

Answer 3

Check your css for class="row" and add {float:left;}