Jumbotron和Footer创建白色边框事件我已经把黑色的背景颜色

Question

所以我正在开发我的第一个网站，我试图使用大图像作为主屏幕的前端。实现jumbotron时，即使我将背景颜色设置为黑色，它也会在图像周围创建一个白色边框。同样的事情，我的页脚，当我把背景颜色，它只将颜色设置为页脚的区域区域，而不是整个屏幕的底部。我该如何解决这个问题，因为我试图让屏幕底部变黑，并且我想让图片周围的边框变成蓝色。以下是主屏幕显示内容的两张照片，以便您可以看到白色边框的位置。感谢您的帮助。

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 CLASS =” 超大屏幕”的代码片段是不是让我把这个在出于某种原因。

<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

我的猜测是第e白色来自页面背景，因为您使用的边距不会扩展元素的背景。

尝试增加body { background-color: black}到你的CSS

Answer 2

这里是一个工作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> 

另外，我建议你做的内联元素相同的代码的可读性更好。

考虑更改

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

到

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

对于图像问题，请显示代码。 这似乎是你需要重新设置margin和padding

*{ 
margin: 0; 
padding: 0; 
}