Foundation 4 - Sections- Centering Tabs - zurb-foundation

Question

Problem: Attempting to Create 6 centered tabs in a row, however because I can't keep all 6 tabs on the same row. It does center the tabs, however pushes 2 of the tabs one line below and leaves an extra empty cell on the first line.
I tried using small-centered and made no difference.
Version: Foundation 4
Browser: Chrome - Latest
Code
<div class="row">
<div class="large-6 large-centered columns">
<div class="section-container horizontal-nav" data-section="horizontal-nav" >
<section class="section">
<p class="title">Tab 1</p>
</section>
<section class="section">
<p class="title">Tab 2</p>
</section>
<section class="section">
<p class="title">Tab 3</p>
</section>
<section class="section">
<p class="title">Tab 4</p>
</section>
<section class="section">
<p class="title">Tab 5</p >
</section>
<section class="section">
<p class="title">Tab 6</p>
</section>
</div>
</div>
</div>

Answer 1

I don't think this is possible with Foundation 4 out of the box. By using large-centered, you are just centering the div containing the tabs and not the tabs themselves. The tabs will always align left.
The functionality you are looking for is available in button groups. For example button-group even-6 will fill the entire space. Maybe it is possible to use jQuery to use a button group instead or to take a look at the JavaScript source and see how Zurb is resizing those elements and apply it to your section / tabs.