我的导航栏出了什么问题？

Question

出于某种原因，我的导航栏比它应该的大。或者至少我认为这是我的导航栏。每当我删除#rect它就会消失。这有什么问题？

#tagline {
  font-style: italic;
  padding-right: 150px;
  padding-left: 10px;
}

nav {
  background-color: white;
  display:flex;
  align-items:center;
  overflow: hidden;
}

#logo {
  padding-top: 8px;
  padding-left: 30px;
  vertical-align: middle;
}

li, li>a {
  text-decoration: none;
  list-style-type: none;
  color: black;
  display: inline-block;
  float: right;
  padding: 5px 10px 5px 10px;
}

li>a:hover {
  background-color: #7bcc1d;
  color: white;
}

.active { 
  background-color: #7bcc1d;
  color: white;
}

#main-bg {
  background-image: url('https://s15.postimg.org/ra1dhmjkb/main-bg.png');
  background-size: 100% 100%;
  height: 500px;
  margin: 0;
}

#rect {
  background-color: white;
  position: relative;
  top: 50px;
  left: 100px;
  width: 400px;
  height: 400px;
  text-align: center;
}

h2 {
  padding-top: 15px;
  margin-bottom: 0;
}

span {
  margin: 0;
}

#enroll_button {
  text-decoration: none;
  padding: 10px 20px 10px 20px;
  background-color: #7bcc1d;
  color: white;
}

<nav>
		<img src="https://s12.postimg.org/n0yt5tenx/lb_logo.png" id="logo" alt="logo">
		<span id="tagline">Live, 1-to-1, flexible and personalized</span>
		<ul id="nav-items">
			<li><a href="#">How it Works</a></li>
			<li><a href="#">Courses</a></li>
			<li><a href="#">Teachers</a></li>
			<li><a href="#" class="active">Enroll</a></li>
			<li><a href="#">Login</a></li>
		</ul>
	</nav>

	<div id="main-bg">
		<div id="rect">
			<h2>3 Steps to Complete<br>Your High School Foreign<br>Language Requirement</h2><br>
			<span><strong>Convenient Scheduling: </strong>Pick lessons<br>to fit your schedule.</span><br><br>
			<span><strong>Interactive Courses: </strong>Learn through<br>live, personal lessons.</span><br><br>
			<span><strong>Earn Approved Credits: </strong>Earn credits<br>to satisfy high school requirements.</span><br><br>
			<a href="#" id="enroll_button">Enroll in Your Course</a>
		</div>
	</div>

Answer 1

您尚未将#rect设置为块元素，而h2页边距会将整个内容拉下来。

#rect h2{margin-top:0;}

Answer 2

这是因为在浏览器中设置用户代理样式表的边距。您可以链接reset.css并在自己的CSS中设置您的愿望边距。