Jumbotron und Footer erstellen weißen Rand, obwohl ich eine Hintergrundfarbe von schwarz

Question

habe Also entwickle ich meine erste Website und ich versuche, ein großes Bild als die Vorderseite des Startbildschirms zu verwenden. Wenn Jumbotron implementiert wird, erzeugt es einen weißen Rand um das Bild herum, obwohl ich meine Hintergrundfarbe immer auf Schwarz setze. Das gleiche gilt für meine Fußzeile, und wenn ich eine Hintergrundfarbe anwähle, wird nur die Farbe für den Bereich der Fußzeile und nicht für den gesamten unteren Bildschirmrand festgelegt. Wie genau kann ich das beheben, weil ich versuche, den unteren Bildschirmrand schwarz zu machen, und ich möchte auch den Rand um das Bild blau machen. Im Folgenden sehen Sie zwei Fotos, wie der Startbildschirm aussieht, damit Sie sehen können, wo die weißen Rahmen sind. Danke für die Hilfe.

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.

Der erste Tag über Container "div class =" jumbotron“. Das Code-Snippet ist nicht erlaubt mir dies aus irgendeinem Grund in zu setzen.

<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

Meine Vermutung ist, dass th Das Weiß kommt vom Seitenhintergrund, weil Sie Ränder verwenden, die den Hintergrund eines Elements nicht erweitern.

Try body { background-color: black} zu Ihrem css

Answer 2

Hier ist das Hinzufügen einer Arbeits Plunker für Sie:

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

Added

body{ 
    background-color:black; 
} 

I Now hoffe es ist so wie du es wolltest. Viel Spaß beim Spielen und Entwickeln Ihrer ersten Seite. Viel Glück.

Answer 3

Sie wenden einen schwarzen Hintergrund auf den Container an. Die Faustregel in solchen Situationen ist ein anderes div, um den Container zu umhüllen.

Sie können so etwas wie dieses

<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> 

auch tun wollen, würde ich Ihnen empfehlen, das gleiche für die Inline-Elemente für eine bessere Lesbarkeit des Codes zu tun.

Betrachten

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

zu

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

Für die Bild Ausgabe zu ändern, zeigen Sie bitte den Code. Es scheint, Sie margin und padding zurücksetzen müssen sein

*{ 
margin: 0; 
padding: 0; 
}