Foundation center multiple columns into row

Question

I try to center columns into a row.

There is the simple code :

<div class="row" style="background-color:black;">

      <div class="large-2 small-6 text-center radius panel left columns" id="days" style="opacity:0.8;margin-right:0.5%;"></div>
      <div class="large-2 small-6 text-center radius panel left columns" id="hours" style="opacity:0.8;margin-right:0.5%;"></div> 
      <div class="large-2 small-6 text-center radius panel left columns" id="minutes"style="opacity:0.8;margin-right:0.5%;"></div>
      <div class="large-2 small-6 text-center radius panel left columns" id="seconds" style="opacity:0.8;"></div> 
</div>

And the result :

You can see, the space of row is the black background. How can i center the columns into the row ?

Answer 1

You can use offset

<div class="row" style="background-color:black;">    
      <div class="large-2 large-offset-2 small-6 text-center radius panel left columns" id="days" style="opacity:0.8;margin-right:0.5%;"></div>
      <div class="large-2 small-6 text-center radius panel left columns" id="hours" style="opacity:0.8;margin-right:0.5%;"></div> 
      <div class="large-2 small-6 text-center radius panel left columns" id="minutes"style="opacity:0.8;margin-right:0.5%;"></div>
      <div class="large-2 small-6 text-center radius panel left columns" id="seconds" style="opacity:0.8;"></div> 
</div>

Answer 2

You can wrap the row in another row/column, then center the contents of that column using the provided utility classes.

<div class="row">
  <div class="large-10 columns large-centered">
    <div class="row">        
      <div class="large-3 small-6 text-center radius panel left columns" id="days" style="opacity:0.8;margin-right:0.5%;"></div>
      <div class="large-3 small-6 text-center radius panel left columns" id="hours" style="opacity:0.8;margin-right:0.5%;"></div> 
      <div class="large-3 small-6 text-center radius panel left columns" id="minutes"style="opacity:0.8;margin-right:0.5%;"></div>
      <div class="large-3 small-6 text-center radius panel left columns" id="seconds" style="opacity:0.8;"></div> 
    </div>
  </div>
</div>