我有一个标头，可以正常使用，直到应用position：fixed;
我正在与网格一起练习以完成初学者级别的freecodecamp项目。页眉是一个网格，具有两个并排的项目，其中一个项目以指定的宽度被推到新行。这些都是预期的，我理解总体响应能力远非理想，但考虑到我的知识水平，就足够了。
问题：的要求是将其固定在顶部。但是当我申请职位时：固定；到网格（这是第7行，尽管实际上第7行和第8行并在一起），尽管宽度没有改变，它还是将第二个网格项推到了新行。
你知道这是怎么回事吗？
[其他奇怪的事情正在发生，尽管元素固定在顶部，但网格轮廓仍从页面上滚动下来，但是我不知道这是否一定是这里主要问题的一部分。
<html>
<head>
<style>
#header {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
position: fixed; /* HERE */
top: 0; /* AND HERE */
}
#header-img {
grid-area: image;
float: left;
max-width: 300px;
}
#nav-ul {
grid-area: nav;
list-style: none;
float: right;
}
#nav-ul li {
display: inline;
margin-left: 20px;
margin-right: 20px;
}
</style>
</head>
<body>
<header id="header">
<div>
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="">
</div>
<nav id="nav-bar">
<ul id="nav-ul">
<a href=""><li class="nav-link">Features</li></a>
<a href=""><li class="nav-link">How It Works</li></a>
<a href=""><li class="nav-link">Pricing</li></a>
</ul>
</nav>
</header>
</body>
</html>您不必修复标题创建一个将放置在标头下面的容器，并将其放入导航栏内。像这样的东西
<header>
</header>
<container>
<nav>
...
</nav>
</container>