html - 导航栏和内容之间的巨大差距

Question

我一直无法让导航栏和页面其余部分之间的空间消失。我已经修复了它，但只是遇到了标题填充问题。一旦它被修复，差距似乎总是会回来。通常，如果我弄乱了填充，它会修复它，但会导致标题出现填充问题。它似乎只是将差距进一步向下移动。

body {
  height: 1600px;
  margin: 0px;
}


/* NAV BAR */

.nav {
  background-color: whitesmoke;
  padding: 15px;
}

.flag {
  float: left;
}

ul {
  font-size: 20px;
  position: sticky;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}

li a {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  text-decoration: none;
  color: rgb(0, 0, 0);
  margin-left: 10px;
  padding: 8px;
}

li a:hover {
  color: rgb(75, 101, 185);
}


/*MAIN PAGE TOP */

.hometop {
  padding-bottom: 10px;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  background-color: rgb(78, 98, 158);
  ;
  height: 490px;
  width: 100%;
}

.hometop img {
  padding-right: 15px;
  float: left;
}

.homephotext {
  color: rgb(168, 77, 138);
  text-shadow: 1px 0 0 rgb(255, 255, 255), 0 -1px 0 rgb(255, 255, 255), 0 1px 0 rgb(255, 255, 255), -1px 0 0 rgb(255, 255, 255);
}

.hometop h1 {
  font-size: 110px;
  padding-bottom: 0px;
}

.hometop h3 {
  font-size: 60px;
}

<section class="nav">
  <img class="flag" src="images/flag.png" height="20" width="35">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="action.html">Take Action</a></li>
    <li><a href="resources.html">Resources</a></li>
    <li><a href="faq.html">FAQ</a></li>
  </ul>
</section>
<section class="hometop">
  <img src="images/homeimg.png" height="500" width="400">
  <div class="homephotext">
    <h1> Text Here. </h1>
    <h3> More Text Here. </h3>
  </div>
</section>

标签： htmlcss