Foundationの `.columns`クラスがモバイル最適化を破壊するパディングを追加するのを止めるには？

Question

私はZurb Foundation（5）を初めて使いました。ただ今、それを使用しているサイトで作業しています。私は、モバイル画面サイズでサイトを見たときに、これらが望ましくない空きスペースである（水平スクロールを引き起こす）問題に遭遇しました。調査では、私はこの財団によって引き起こされる.colunmnクラス参照 - 特にパディング：

.column, .columns { 
    width: 100%; 
    float: left; 
    padding-left: .625rem; 
    padding-right: .625rem; 
} 

をこれはZurbがするために奇妙なことのように思えるので、私は私が私の最後に気にいら間違ってやったと仮定しています。私のHTMLは次のようになります：

<div class="title-panel"> 
    <div class="row"> 
    <div class="large-12 columns"> 
    <!--CONTENT--> 
    </div> 
    </div> 
</div> 

<div class="main-panel"> 
<div class="row"> 
    <div class="small-12 medium-4 medium-push-8 columns"> 
    <!--CONTENT--> 
    </div> 
    <div class="small-12 medium-8 medium-pull-4 columns"> 
    <!--CONTENT--> 
    </div> 
    </div> 
</div> 

この幅を100％プラスに埋めていく方法はありますか？

問題のイメージ。青いボックスの幅は100％ですが、上記のパディングでは右側に緑色の領域が追加されます。これは.rowクラスを有する上記div要素の親要素に起因した実測

Answer 1

。他の要素やクラスで区切られていても、2つの.rowsを順番に持つことはできません。 .columnクラスで区切られていなければなりません。