html - Zurb Foundation grid or block grid not working with vertical tabs -

i have set of vertical tabs, , when try , nest in grid or block grid elements seems overflow outside of element

i.e 1,2,3 should in right section of below image

<div class="row"> <div class="medium-8 columns">     <ul class="tabs vertical" data-tab>       <li class="tab-title active"><a href="#domainnames">domain names</a></li>       <li class="tab-title"><a href="#webhosting">web hosting</a></li>       <li class="tab-title"><a href="#businesshosting">business hosting</a></li>       <li class="tab-title"><a href="#premiumservices">premium services</a></li>     </ul>     <div class="tabs-content">       <div class="content active" id="domainnames">         <div class="row">           <div class="medium-12 columns">             <h1>{$lang.domaincheckerchoosedomain}</h1>             <form method="post" action="{$systemsslurl}domainchecker.php">                 <div class="row collapse">                   <div class="medium-9 columns">                     <input type="text" name="domain" placeholder="{$lang.domaincheckerdomainexample}">                   </div>                   <div class="medium-3 columns">                     {if $condlinks.domainreg}<input type="submit" value="{$lang.checkavailability}" class="button postfix" /> {/if}                   </div>                 </div>             </form>           </div>         </div>       </div>       <div class="content" id="webhosting">         <ul class="small-block-grid-3">           <li>1</li>           <li>2</li>           <li>3</li>         </ul>       </div>       <div class="content" id="businesshosting">         <ul class="small-block-grid-3">           <li>1</li>           <li>2</li>           <li>3</li>         </ul>       </div>       <div class="content" id="premiumservices">         <ul class="small-block-grid-3">           <li>1</li>           <li>2</li>           <li>3</li>         </ul>       </div>     </div>   </div> 

the tabs vertical , tabs-content got special properties build vertical navigation structure.

tab tabs vertical got width: 20% , float:left.

the .small-block-grid-3 breaks out of float.

try:

@import "foundation"; .small-block-grid-3 { margin-left: 20%; & > li:nth-of-type(3n+1) {     clear: none; } } 

demo: http://sassmeister.com/gist/b3c63c443765c4b7ad56

update

is similar issue standard grid?

no, think should able use standard grid without modifications:

<div aria-hidden="false" class="content active" id="panel21">   <div class="row">   <div class="small-3 columns">1</div>   <div class="small-3 columns">2</div>   <div class="small-3 columns">3</div> </div> 

demo: http://sassmeister.com/gist/29c180401ed433ff2d2d