JumbotronとFooterが白い境界線を作成していますが、黒の背景色を入れましたが

Question

私は最初のWebサイトを開発していますので、ホーム画面の前面に大きな画像を使用しようとしています。ジャンボトロンを実装すると、背景色を黒に設定していても、画像の周りに白い枠線が作成されます。私のフッタにも同じことがあり、バックグラウンドカラーを置くと、画面の下部全体ではなく、フッタの領域領域にのみ色が設定されます。私は画面の下を黒くして絵を青く囲むようにしたいので、これをどのくらい修正することができますか？以下は、ホーム画面がどのように見えるかの2つの写真で、白い枠線がどこにあるかを見ることができます。お手伝いありがとう。

This is the footer of my website. I don't understand why only a small portion of the footer is black and not the whole bottom.

This is the large image that I have put on my screen. In my css I have used it as a background image. Every time I change the background color to black the border around the image stays as white.

コンテナ上の最初のタグには "のdivクラス=" ジャンボトロン」。コードスニペットは、私はいくつかの理由のためにこれを入れるために許可されていないさ。

<div class="container">` 
    <div class="row text-center">` 
     <a class="btn btn-primary" href="#"role="button">Hello</a>` 
    `</div>` 
    </div>` 
</div>` 

<!-- Write your comments here --> 

<footer class="container"> 
    <div class="row"> 
    <p class="col-sm-4"> 
     &copy; Stock 
    </p> 
    <ul class="col-sm-8"> 
     <li class="col-sm-1"><img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/twitter.svg"></li> 
     <li class="col-sm-1"><img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/facebook.svg"></li> 
     <li class="col-sm-1"> <img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/instagram.svg"></li> 
     <li class="col-sm-1"><img src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-4/medium.svg"></li> 
    </ul> 
    <p class="col-sm-3">About Us</p> 
    </div> 
</footer> 

CSS

.jumbotron { 
    display: flex; 
    align-items: center; 
    background-image:url('https://inst.eecs.berkeley.edu/~cs194-26/fa14/upload/files/proj3/cs194-di/proj3_sutardja_anthony/imgs/earth_road_joined/road.png'); 
    background-size: cover; 
    height: 700px; 
    margin:75px; 
    background-attachment:fixed; 
    border-style:solid; 
    background-color:black; 

} 

footer { 
    font-size: 15px; 
    padding: 20px 0; 
    color:red; 
    font-family: 'Ubuntu', sans-serif; 
    margin:10; 
    background-color:black; 
} 

footer .col-sm-8 { 
    display: flex; 
    justify-content: flex-end; 
} 

footer ul { 
    list-style: none; 
} 

footer li img { 
    width: 32px; 
    height: 32px; 
} 

Answer 1

私の推測は、要素の背景を拡張しない余白を使用しているため、白がページの背景から来ています。

はあなたのCSSここ

Answer 2

にbody { background-color: black}を追加してみてください、あなたのために働いてplunkerです：

https://plnkr.co/edit/h5X9Q1rIwFuMsY3N1YGD?p=preview

body{ 
    background-color:black; 
} 

追加

今私は、それがあなたが望むように願っています。あなたの最初のサイトを演奏して開発してください。がんばろう。

Answer 3

コンテナに黒い背景が適用されます。 このような場合の経験則では、別のdivを使用してコンテナをラップします。

あなたはまた、この

<footer> 
    <div class="container"> 
    <div class="row"> 
    <p class="col-sm-4"> 
     &copy; Stock 
    </p> 
    <ul class="col-sm-8"> 
     ... 
    </ul> 
    <p class="col-sm-3">About Us</p> 
    </div> 
</footer> 

ような何かをしたい場合、私は、コードの読みやすくするためのインライン要素のために同じことを行うためにあなたをお勧めします。

はイメージの問題について

<div class="col-sm-4"> 
     <p>&copy; Stock</p> 
    </div> 

に

<p class="col-sm-4"> 
     &copy; Stock 
    </p> 

の変更を検討し、コードを表示してください。 あなたがあなたがStackOverflowのエディタを使用すると、そこにジャンボトロンを入れさせないという意味でマージンとパディング

*{ 
margin: 0; 
padding: 0; 
}