我正在尝试制作此页面：page但是页眉和剖面部分重叠。我可以通过添加填充顶部来降低它：75px，但我不确定这是否正确。解决这个问题的正确方法是什么？在示例中的导航栏中，列表项之间的空间比我的大，但我给出了相同的填充。问题出在哪里？
*{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #eee;
}
html,body{
font-family: sans-serif;
height: 100%;
}
header{
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
position: fixed;
min-height: 75px;;
padding: 0 20px;
}
.logo{
width: 60vw;
}
.logo > img{
width: 100%;
height: 100%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20px;;
}
nav > ul{
width: 35vw;
display: flex;
justify-content: space-around;
}
li{
list-style: none;
}
a{
color: #000;
text-decoration: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<div class="logo">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="" class="header-img">
</div>
<nav id="nav-bar">
<ul>
<li><a href="#features" class="nav-link">Features</a></li>
<li><a href="#how_it_works" class="nav-link">How It Works</a></li>
<li><a href="#pricing" class="nav-link">Pricing</a></li>
</ul>
</nav>
</header>
<section id="hero">
<h2>Hadcrafted, home-made masterpieces</h2>
<form action="" id="form">
<input type="email" placeholder="Enter your email...">
<input type="submit" id="submit">
</form>
</section>
</body>
</html>始终对内部div而不是外部div使用fix由于你已经给了导航栏固定的位置，只需给它：
Position:absolute;
让innnerdiv在其中，然后给出这个div相对于的位置
Position:fixed;