Foundationフレックスボックスグリッドの問題です。列が大きすぎます

Question

私は、基礎から新しいフレックスボックスオプションを使用してサイトを作成しました。モバイルで見た場合を除いて素晴らしい作品です。何らかの理由で列が320pxであっても、iphone 5で列が340pxに伸びます。行に隠されたが、私はそれがHERESにコード

<div class="container"> 
     <!-- HEADER --> 
     <header class="row align-middle"> 
      <div class="columns logo small-12 js-click-effect-again"><i class="fa fa-fighter-jet" aria-hidden="true"></i></i></div> 
      <nav class="columns main-nav" role="navigation"> 
       <ul class="row main-nav-list medium-unstack medium-collapse"> 
        <li class="columns"><a href="products.html">Products</a></li> 
        <li class="columns"><a href="news.html">News</a></li> 
        <li class="columns"><a href="about.html">About</a></li> 
        <li class="columns"><a href="contact">Contact</a></li> 
       </ul> 
      </nav> 
     </header> 

     <main role="main"> 
      <div class="row"> 
       <div class="hero-banner columns"> 
        <img class="hero-image" src="../DIST/images/banner.jpg"> 
        <div class="hero-banner-text"> 
         <h1>Qui autem esse poteris, nisi te amor ipse ceperit?</h1> 

         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur deinde Metrodori liberos commendas? Sed ea mala virtuti magnitudine obruebantur. Sed mehercule pergrata mihi oratio tua. Et ille ridens: Video, inquit, quid agas; Nam Metrodorum non puto ipsum professum, sed, cum appellaretur ab Epicuro, repudiare tantum beneficium noluisse; Duo Reges: constructio interrete. Qui igitur convenit ab alia voluptate dicere naturam proficisci, in alia summum bonum ponere? Nihil ad rem! Ne sit sane; </p> 

         <a class="js-overlay-trigger" href="#">Overlay</a> 

        </div> 
       </div> 
      </div> 

      <div class="medium-unstack row"> 
       <div class="columns tile"> 
        <img src="http://placehold.it/320x150/3B0D0B/fff"> 
        <h2 class="tile-title"> 
        Some title copy 
        </h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ita prorsus, inquam; Minime vero istorum quidem, inquit. Qualem igitur hominem natura inchoavit? Duo Reges: constructio interrete. </p> 
        <a class="button" href="">A link</a> 
       </div> 
       <div class="columns tile"> 
        <img src="http://placehold.it/320x150/E8C0A8/fff"> 
        <h2 class="tile-title"> 
        Some title copy 
        </h2> 
        <p>Nihil illinc huc pervenit. Eam stabilem appellas. Bonum patria: miserum exilium. Quae diligentissime contra Aristonem dicuntur a Chryippo. Occultum facinus esse potuerit, gaudebit; Confecta res esset. </p> 
        <a class="button" href="">A link</a> 
       </div> 
       <div class="columns tile"> 
        <img src="http://placehold.it/320x150/63649E/fff"> 
        <h2 class="tile-title"> 
        Some title copy 
        </h2> 
        <p>Hoc loco tenere se Triarius non potuit. Igitur ne dolorem quidem. At iam decimum annum in spelunca iacet. Dat enim intervalla et relaxat. Respondeat totidem verbis. Atqui reperies, inquit, in hoc quidem pertinacem; </p> 
        <a class="button" href="">A link</a> 
       </div> 
      </div> 

      <div class="text-block row"> 
       <div class="columns"> 
        <div class="text-block-content"> 
         <h3>Verba tu fingas et ea dicas, quae non sentias?</h3> 

         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. An ea, quae per vinitorem antea consequebatur, per se ipsa curabit? Si alia sentit, inquam, alia loquitur, numquam intellegam quid sentiat</p> 
        </div> 
       </div> 
      </div> 

     </main> 


     <footer class="main-footer row"> 
      <div class="columns"> 
       <div class="row"> 
        <div class="columns"> 
         <div class="footer-group accordion js-accordion"> 
          <h4 class="footer-group-title accordion-trigger js-accordion-trigger">Group title<i class="fa fa-chevron-circle-down" aria-hidden="true"></i></h4> 
          <ul class="footer-list accordion-content js-accordion-content"> 
           <li><a href="#">A footer link</a></li> 
           <li><a href="#">A footer link</a></li> 
           <li><a href="#">A footer link</a></li> 
           <li><a href="#">A footer link</a></li> 
          </ul> 
         </div> 
        </div> 
        <div class="columns"> 
         <div class="footer-group accordion js-accordion"> 
          <h4 class="footer-group-title accordion-trigger js-accordion-trigger">Group title<i class="fa fa-chevron-circle-down" aria-hidden="true"></i></h4> 
          <ul class="footer-list accordion-content js-accordion-content"> 
           <li><a href="#">A footer link</a></li> 
           <li><a href="#">A footer link</a></li> 
           <li><a href="#">A footer link</a></li> 
           <li><a href="#">A footer link</a></li> 
          </ul> 
         </div> 
        </div> 
        <div class="columns"> 
         <div class="footer-group accordion js-accordion"> 
          <h4 class="footer-group-title accordion-trigger js-accordion-trigger">Group title<i class="fa fa-chevron-circle-down" aria-hidden="true"></i></h4> 
          <ul class="footer-list accordion-content js-accordion-content"> 
           <li><a href="#">A footer link</a></li> 
           <li><a href="#">A footer link</a></li> 
           <li><a href="#">A footer link</a></li> 
           <li><a href="#">A footer link</a></li> 
          </ul> 
         </div> 
        </div> 
        <div class="columns"> 
         <div class="footer-group accordion js-accordion"> 
          <h4 class="footer-group-title accordion-trigger js-accordion-trigger">Group title<i class="fa fa-chevron-circle-down" aria-hidden="true"></i></h4> 
          <ul class="footer-list accordion-content js-accordion-content"> 
           <li><a href="#">A footer link</a></li> 
           <li><a href="#">A footer link</a></li> 
           <li><a href="#">A footer link</a></li> 
           <li><a href="#">A footer link</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
       <span class="columns copyright align-bottom">&copy;2016</span> 
      </div> 
     </footer> 
    </div> 

「私はデフォルトの基盤を使用していると私はそれを上書きするために何かをすることができます追加していないがポイント

が欠けていると思う：私はオーバーフローを追加することができます何が起こっているのか理解していない？

Answer 1

ここに「間違っている」とは見えませんが、CSSはありません。私はところでhttp://codepen.io/rafibomb/pen/RojaGW

を、あなたはそれをフォークにあなたのCSSを追加することができますデモを設定し、リンクをポストバック：あなたは、列

<nav class="columns main-nav" role="navigation"> 

のこの第二セットは必要ありません。