html - 网站四周都是黑色空间

Question

我正在制作作品集，并且一直在修改主页上的 CSS。我已经清理了我的 CSS，但不知何故我的主页(黑色空间)有一个巨大的间隙和底部和顶部的小间隙。我认为这可能与设置为背景大小有关包含。但我不想更改它，因为图像拉伸(stretch)太多(我喜欢它现在的位置)。

这是我的代码:

@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
@import url('https://fonts.googleapis.com/css?family=Fira+Sans');

*{
  margin: 0;
  padding: 0;

}
#wrapper {
  margin: 0 auto;
  padding: 0;
}

#background {
  background-image:url("images/Untitled-1.jpg");
  background-repeat:no-repeat;
  background-size:contain;    
}

header{
  background: rgb(115, 78, 116);
}

p{
  width: 20%;
  font-size: 20px;
  color: antiquewhite;
  padding: 0;
  margin: 0 auto;
  position:absolute;
  margin-left: 50%;
  font-family: 'Fira Sans', sans-serif;
  font-style: normal;
  margin-top: 15%;

}

body {
  background-color: black;
  margin: 0;
  padding: 0;
}

footer{
  color: antiquewhite;
  margin: 0;
  padding: 0;
}


h1{font-family:'Fjalla One', sans-serif;
  color: floralwhite;
  font-size: 300%;

}

nav {
  margin-left: 80%;
  margin-bottom: 40%;

}
.stretch{
  padding: 20px;
  margin: 20px 0px;
  border-radius: 50px 0px 0px 50px;
  width: 250px;
  height: 50px;
  text-align: center;
  text-shadow: 2px 2px black;
  font-size: 150%;
  font-family: 'Fjalla One', sans-serif;
  background-color: rgb(40, 31, 17);
  position: relative;
  -webkit-transition-duration: 0.5s;
  /*    standard syntax*/
  transition-duration: 0.5s;
  -webkit-transition-property: transform;
  /*    standard syntax*/
  transition-property: transform;
}
/* tabs will extend to left slightly*/
.stretch:hover { -webkit-transform: translateX(-20px);
  /*    standard syntax*/
  transform: translateX(-20px);
}

a:link {
  text-decoration: none;
  color: antiquewhite;   
}

a:visited {
  text-decoration: none;
  color: antiquewhite;
}

a:hover {
  text-decoration: none;
  color: antiquewhite;
}

a:active {
  text-decoration: none;
  color: antiquewhite;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div id="wrapper">
  <header>
    <h1>Tavyon Richardson</h1>
    <ul class="icon">
      <li><span class="list">TavyonRichardson@yahoo.com</span><i class="material-icons">mail_outline</i></li>
      <li><span class="list">989-285-5133</span><i class="material-icons">call</i></li>
      <li><span class="list">Alma, Michigan</span><i class="material-icons">location_on</i></li>
    </ul>
  </header>
  <div id="background">
    <p><span>Hey!</span>Welcome to my webiste. Here, you can see everything from my life story, to my my recent projects and resume.</p>
    <nav id="navbar">
      <ul class="nav">
        <li class="stretch"><a href="">About me</a></li>
        <li class="stretch"><a href="">Courses</a></li>
        <li class="stretch"><a href="http://tavyonrichardson.com/projects.html">Projects</a></li>
        <li class="stretch"><a href="http://tavyonrichardson.com/nms_114/blog">Blog</a></li>
        <li class="stretch"><a href="">Resume</a></li>
      </ul>
    </nav>
  </div>  
</div>

Answer 1

没有看到背景所以不确定，但我认为问题是边缘

• 将 margin-top:0 添加到 header 上的 h1
• 删除(或更改值)nav 的 margin-bottom 属性