ブートストラップ3.0の行、私が作成したときのmargin-left 15ピクセルとマージン右15ピクセル

Question

<header> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-2 logo"> 
 
     <img src="img/logo.png" alt="Logotype"> 
 
     </div> 
 
     <div class="col-lg-7 col-lg-offset-3"> 
 
     <ul class="menu"> 
 
      <li class="menu-item"><a href="#">Home</a></li> 
 
      <li class="menu-item"><a href="#">About</a></li> 
 
      <li class="menu-item"><a href="#">Expertise</a></li> 
 
      <li class="menu-item"><a href="#">Teams</a></li> 
 
      <li class="menu-item"><a href="#">Works</a></li> 
 
      <li class="menu-item"><a href="#">People say</a></li> 
 
      <li class="menu-item"><a href="#">Contact</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row text-center content-wrapper"> 
 
    <div class="col-lg-12 content-header"> 
 
     <h1 class="title">We Are Awesome Creative Agency</h1> 
 
     <p class="description-header"> 
 
     This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem<br> quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh<br> vulputate cursus 
 
     a sit amet mauris. Morbi accumsan ipsum velit. 
 
     </p> 
 
     <div class="button"> 
 
     <a class="content-button">LEARN MORE</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</header>

が、私は最近、ブートストラップを学び、このような問題に直面し始め、なぜ彼は左マージンを持ってい/右の15px、私の画面の幅1263px、これらのフィールドは1293pxフィールドの後に水平スクロールするように見えるので、この新しい問題はどのように解決するのですか？

Just my template

Screenshoot my console

Answer 1

margin-left: 0px;とmargin-right: 0pxを試してみてください。次に、margin: 0 autoに設定し、幅をwidth: 100%に変更します。これは助けになるかもしれませんが、もしそうでなければ、私はあなたのコードの断片を必要とするかもしれません。

Answer 2

適切なアラインメントとパディングを行うには、行を.container（固定幅）または.container-fluid（全幅）内に配置する必要があります。コンテナには1263pxの幅を与えなければなりません。その内部には水平スクロールを避けるために行を使用する必要があります。

コンテナエレメントの左右に15pxのパディングがあります。行の左右両側に15pxの負のマージンがあり、コンテナが（パディングのために）使用するスペースを補うことになります。あなたの行があなたの画面上に100％表示され、水平方向のスクロールを避けるようにします。

Answer 3

<header> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-2 logo"> 
 
     <img src="img/logo.png" alt="Logotype"> 
 
     </div> 
 
     <div class="col-lg-7 col-lg-offset-3"> 
 
     <ul class="menu"> 
 
      <li class="menu-item"><a href="#">Home</a></li> 
 
      <li class="menu-item"><a href="#">About</a></li> 
 
      <li class="menu-item"><a href="#">Expertise</a></li> 
 
      <li class="menu-item"><a href="#">Teams</a></li> 
 
      <li class="menu-item"><a href="#">Works</a></li> 
 
      <li class="menu-item"><a href="#">People say</a></li> 
 
      <li class="menu-item"><a href="#">Contact</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="row text-center content-wrapper"> 
 
    <div class="col-lg-12 content-header"> 
 
     <h1 class="title">We Are Awesome Creative Agency</h1> 
 
     <p class="description-header"> 
 
     This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem<br> quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh<br> vulputate cursus 
 
     a sit amet mauris. Morbi accumsan ipsum velit. 
 
     </p> 
 
     <div class="button"> 
 
     <a class="content-button">LEARN MORE</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</header>