当我将边距应用于我的主标签以试图让它出现在标题下方时，它会向下移动整个页面，而不仅仅是主要部分。为什么主部分没有出现在标题下方？
我尝试使用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/导航和按钮的中心。将边距应用于横幅或容器会导致包括页眉在内的整个页面向下移动。
我认为原因是标题标签中的元素大于其容器。
因此，您可以尝试以下替代方案：
尝试 1：
给你的header一个特定的高度，以便maindiv可以低于它：
header
{
height: 110px ; /* Approx */
}
尝试 2：
将margin-top添加到main标记
main
{
margin-top: 7% ; /* Approx */
}
这可能会给你预期的结果。