Large Gap Between Nav Bar and Content

Question

I've been having trouble getting the space between my navbar and the rest of the page to go away. I have fixed it, but only to be met with problems with headings padding. Once it's fixed the gap always seems to come back. Usually, if I mess around with the paddings it will fix it, but then cause padding issues with the headings. It seems to just move the gap farther downwards.

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>