MaterializeCSS - コンテナの外側に表示されるコンテンツ

Question

レイアウトを作成するためにMaterializeCSSを使用していますが、2行を含むコンテナがあります。ここで

は私のコードです： -

<div class="container"> 
    <div style="border: 1px solid #b1b1b1;"> 

     <div class="row"> 
      <div class="col s12">Hello</div> 
     </div> 

     <div class="row">World 
      <div class="col s12">Hello</div> 
     </div> 
    </div> 
</div> 

そして、ここではそれがどのように見えるかです： -

Container Layout

なぜこれが起こっている私のコンテンツがコンテナの内側にあり、また内の表示されるはずにもかかわらず、コンテナの境界？

編集：行は全幅にそれらを伸ばすために、負のマージンを適用するよう

<div class="add-arena grey lighten-3"> 
    <div class="row"> 
     <div class="col s12 center deep-orange white-text">Add Arena</div> 
    </div> 
    <div class="row"> 
     <div class="add-arena-image-holder col s4"> 
      <form action="#"> 
       <div class="file-field input-field col s11"> 
        <div class="btn"> 
         <span>File</span> 
         <input type="file"> 
        </div> 
        <div class="file-path-wrapper"> 
         <input class="file-path validate" type="text"> 
        </div> 
       </div> 
      </form> 
     </div> 
     <div class="add-arena-description col s8"> 
      <div class="row"> 
       <div class="input-field col s6"> 
        <input placeholder="What will it be called?" id="first_name" type="text" class="validate"> 
        <label for="first_name">Arena Name</label> 
       </div> 
       <div class="input-field col s6"> 
        <input placeholder="Arena Number" id="first_name" type="text" class="validate"> 
        <label for="first_name">Arena</label> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col s3 right"> 
        <a class="waves-effect waves-light btn deep-orange"><i class="material-icons left">send</i>Add</a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

すべてのコンテンツは、実際のCOLSにする必要があります。必ずコラムの内容を入れてください。

https://codepen.io/anon/pen/EXZzVr

<div class="container"> 
    <div style="border: 1px solid #b1b1b1;"> 

     <div class="row"> 
      <div class="col s12">Hello</div> 
     </div> 

     <div class="row"> 
      <div class="col s12">Hello World</div> 
     </div> 
    </div> 
</div> 

は、どのような正確にあなたが達成したいですか？

は、次の行を見てみましょう：私は再び同じ問題に直面しています

https://github.com/Dogfalo/materialize/blob/0e13b80f6bfee1700dd2c2aa49494a44c8a61acb/sass/components/_grid.scss#L17-L18

https://github.com/Dogfalo/materialize/blob/0e13b80f6bfee1700dd2c2aa49494a44c8a61acb/dist/css/materialize.css#L3367-L3368