下部にスクロールバーがあるのはなぜですか？

Question

私はあるプロジェクトでZurb Foundationを実験していましたが、私のページではこれを使用しました。ここで

<div class="row text-center"> 
    <h3>Laurem Ipsom Dolor</h3> 
    <div class="row"> 
     <div class="small-4 small-offset-2 columns"> 
     <img src="some.svg" class="thumbnail centered"> 
     <h3>Laurem Ipsom Dolor</h3> 
     </div> 
     <div class="small-4 end columns"> 
     <img src="another.svg" class="thumbnail centered"> 
     <h3>Laurem Ipsom Dolor</h3> 
     </div> 
    </div> 
</div> 

は実施例である：https://jsfiddle.net/f7kb9x6n/

は、なぜ通常の四半期である中小画面サイズのための下部にスクロールバー（なぜそれがページの幅を超えない）（例jsfiddleウィンドウがあります画面）

私はjsfiddleで定義していないので、ここではマージン：自動ですが、ここでは心配しないでください。

Answer 1

であなたが巣別.row内部.rowをすべきでないような.columns内部.row秒を持っている、.rowの直接の子供が何をするにしても、.column（または.columnsする必要がありますに基づいて、 ）を使用し、このマークアップは、あなたのケースのために働く必要があります。これはをなぜ起こるか

<div class="row text-center"> 
    <div class="column"> 
      <h3>Laurem Ipsom Dolor</h3> 
      <div class="row"> 
       <div class="small-4 small-offset-2 columns"> 
       <img src="some.svg" class="thumbnail centered"> 
       <h3>Laurem Ipsom Dolor</h3> 
       </div> 
       <div class="small-4 end columns"> 
       <img src="another.svg" class="thumbnail centered"> 
       <h3>Laurem Ipsom Dolor</h3> 
       </div> 
      </div> 
     </div> 

がに答えるために、BECです負のマージンを使用すると、列間隙（列間の間隔）を補正することができます。.row.row .rowのCSSルールを編集しないでください。Foundationグリッドが邪魔になります。

Answer 2

これは外部のCSSファイルからのものです。

理由：

.row .row { 
    margin-left: -.625rem; 
    margin-right: -.625rem; 
    max-width: none; 
    } 

は余裕権を削除して、試してみてください。

Answer 3

Zurb docsあなたが巣にthis fiddle forked

Answer 4

.text-center { 
    overflow: hidden !important; 
} 

これを使用します。それは働いています