は私が応答ウェブサイトを作成するには、ブートストラップフレームを使用していフッター

Question

せずにウェブサイトからの水平バーを削除します。私は、ページの下部に水平バーがあることに気付きました。私はそれを取り除くことができませんでした。私はstackoverflowで同様の答えを見て、それらのほとんどは、フッターに問題があります。私は私のことをチェックして、まだフッタを設定していないし、100％の幅も持っていない。私が使用したCSSは、ブートストラップ要素のサイズを変更しませんでした。私のHTMLコードに何が間違っているのか分かりますか？

マイスタイルシート（私は一番下に内容を変更するカルーセルのためのブートストラップが提供するスタイルシートやセクションのdivのIDを使用しています：

CSS

.carousel-inner > .item > img, 
    .carousel-inner > .item > a > img { 
    width: 70%; 
    margin: auto; 
} 

#section { 
    padding-left: 5%; 
} 

HTML

以下は

<div id="container"> 
    <!--Slideshow--> 
    <div class="jumbotron" style="background:transparent !important;"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
     <li data-target="#myCarousel" data-slide-to="3"></li> 
     <li data-target="#myCarousel" data-slide-to="4"></li> 
     </ol> 

     <!-- Wrapper for slides --> 
     <div class="carousel-inner" role="listbox"> 

     <div class="item active"> 
      <img src="Images/Swimming.jpg" alt="1" style="width:460px; height:345px"> 
      <div class="carousel-caption"> 
      <h3>Swimming</h3> 
      <p>Event of Swimming</p> 
      </div> 
     </div> 

     <div class="item"> 
      <img src="Images/Basketball.jpg" alt="2" style="width:460px; height:345px"> 
      <div class="carousel-caption"> 
      <h3>Basketball</h3> 
      <p>Event of Basketball</p> 
      </div> 
     </div> 

     <div class="item"> 
      <img src="Images/Tennis.jpg" alt="3" style="width:460px; height:345px"> 
      <div class="carousel-caption"> 
      <h3>Tennis</h3> 
      <p>Event of Tennis</p> 
      </div> 
     </div> 

     <div class="item"> 
      <img src="Images/Football.jpg" alt="4" width="460" height="345"> 
      <div class="carousel-caption"> 
      <h3>Football</h3> 
      <p>Event of Football</p> 
      </div> 
     </div> 

     <div class="item"> 
      <img src="Images/Baseball.jpg" alt="5" width="460" height="345"> 
      <div class="carousel-caption"> 
      <h3>Baseball</h3> 
      <p>Event of Baseball</p> 
      </div> 
     </div> 
     </div> 

     <!-- Left and right controls --> 
     <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
     </a> 
     <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
     </a> 
    </div> 
    </div> 

    <br> 


    <div class="row"> 
    <div class="col-sm-12 col-md-4" id="section"> 
     <h3>Registration for 2018</h3> 
     <div id="registration" style="font-size: 20px;"> 
     <p>Click <a href="#">here</a> to Register 
      <br /> Click <a href="#">here</a> to Register</p> 
     </div> 
    </div> 
    <div class="col-sm-12 col-md-4" id="section"> 
     <h3>Announcements</h3> 
     <p>s to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one 
     of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum 
     et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in 
     section 1.10.32. 
     </p> 
    </div> 
    <div class="col-sm-12 col-md-4" id="section"> 
     <h3>Facebook Feed</h3> 
     <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English 
     versions from the 1914 translation by H. Rackham. 
     </p> 
    </div> 
    </div> 
</div> 

水平BAとの私のウェブサイトの写真ですr：

私はこれが間違っていることを学ぶことができますように願っています。不要な水平スクロールバーの

Answer 1

一つの典型的な原因は、ビューポートの端にそれをプルする要素にマイナス右/左余白を設定しています。マージンは画面を越えて伸び、スクロールバーを強制します。

ブートストラップは、あなたのケースでは、水平スクロールバーの原因となっている、.rowの左右に-15px余白を適用します。

ブートストラップの.rowは、.containerの内部で使用されるように設計されています。これは、負のマージンを補うために左右の埋め込みがあります。あなたは含むdiv要素を持っていますが、ブートストラップは、それをスタイリングされていないので、「コンテナ」、ないclassのidを持っています。それに.containerクラスを追加します。あなたは.containerのパディング望ましくないを見つけた場合

<div id="container" class="container"> 

、あなたの代わりにカスタムCSSルールとのオーバーフローを隠すことができます：

#container { 
    overflow: hidden; 
}