Centering CSS using Zurb Foundation CSS Framework

Question

I am having a hard time centering all the elements on my site. I'm using Foundation CSS and on the documentation page, they were able to center some text. I copied the same css onto my page but as you can see, nothing on the page is centered. This is the relevant html:

https://infinite-oasis-2303.herokuapp.com/

<div class="row">
  <div class="small-3 small-centered columns">first line</div>
</div>

<div class="row">
  <div class="small-6 large-centered columns">second line</div>
</div>

<div class="row">
        <div class="small-11 small-centered columns">
            <h1>The Club</h1>
            <p/>There are currently <%= Investor.count %> investors. <%= 50 - Investor.count %> places left!</p>
        </div>
</div>


<div class="row">
    <div>       
        <iframe width="700" height="400" src="https://www.youtube.com/embed/4MlZR691of0" frameborder="0" allowfullscreen></iframe>
    </div>

    <div>   
        <% if Investor.count <= 50 %>
            <%= link_to "Join the group now.", new_investor_path, class: "button radius"%>
        <% else %>
            <%= link_to "Sorry, no space.", "#", class: "button disabled"%>
        <% end %> 
    </div>
</div>

Answer 1

The columns are centered using small-centered, large-centered. It's the contents that you want centered using text-center.

<div class="small-3 small-centered text-center columns">first line</div>

<div class="small-6 large-centered text-center columns">second line</div>

<div class="text-center">       
        <iframe width="700" height="400" src="https://www.youtube.com/embed/4MlZR691of0" frameborder="0" allowfullscreen></iframe>
</div>