[当我在我的主要标签上使用页边距以使其出现在标题下方时，它会将整个页面向下移动，而不仅仅是主要部分。为什么主部分没有出现在标题下方？
我已经尝试过使用div和语义HTML标签。
body {
font-size: 1.5em;
line-height: 1.6;
font-weight: 400;
font-family: "Roboto", sans-serif;
color: #222;
}
header {
text-align: center;
width: 100%;
}
header h1 {
float: left;
}
nav {
margin: 25px 25px;
float: left;
}
nav ul {
margin: -17px 0 0 15px;
list-style-type: none;
}
nav ul li {
display: inline-block;
padding: 5px;
}
nav ul li a {
text-decoration: none;
}
.nav-button {
float: right;
margin-top: 10px;
margin-right: 5px;
}
.nav-button a {
color: #fff;
text-decoration: none;
}
main {
margin-top: 20px;
}
.container {
position: relative;
max-width: 820px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.banner {
margin-top: 50px;
}<body>
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li class="navbar-item"><a href="#">Nav Item</a></li>
<li class="navbar-item"><a href="#">Nav Item</a></li>
<li class="navbar-item"><a href="#">Nav Item</a></li>
</ul>
</nav>
<button class="button-primary nav-button"><a href="#">Button</a></button>
</header>
<main>
<div class="container">
<div class="banner">
<h1>Welcome to A Website</h1>
<p>Simple subheading</p>
</div>
</div>
</main>
</body>我期待主要部分，例如包含<h1>Welcome to A Website</h1>和<p>Simple subheading</p>]的标语
将显示在标题部分下方，但是它显示在h1 / nav和按钮的中心内。对横幅或容器应用边距会使包括标题的整个页面向下移动。
[当我在我的主要标签上使用页边距以使其出现在标题下方时，它会将整个页面向下移动，而不仅仅是主要部分。为什么主部分没有出现在标题下方？我...
我认为原因是标题标签内的元素大于其容器。