Html 为什么正文不是从页面顶部开始的？

我想做一个固定的导航栏，然后在它下面做一个网格容器，但问题是我的身体从导航栏下面开始。 当我将导航栏位置更改为除“固定”之外的任何其他位置时，它都可以工作，但我确实希望它固定在页面顶部，那么如何使正文从页面顶部开始

以下是主体所在的位置：

HTML代码：

<!-- Navbar -->
<nav class="navbar">

  <div class="navbar-website-icon">
    <img src="website-icon.jpg" alt="" height="55%" width="65%">
  </div>

  <div class="navbar-about">
    <p>About</p>
  </div>

  <div class="navbar-the-grid">
    <p>The Grid</p>
  </div>

  <div class="navbar-how-the-grid-works">
    <p>How The Grid Works</p>
  </div>

  <div class="navbar-customer-industry">
    <p>Customer & Industry</p>
  </div>

  <div class="navbar-library">
    <p>Library</p>
  </div>

  <div class="navbar-newsroom">
    <p>Newsroom</p>
  </div>

  <div class="navbar-contact">
    <p>Contact</p>
  </div>

  <div class="navbar-search-icon">
    <img src="search-icon.jpg" alt="" height="25%" width="30%">
  </div>

</nav>


<!-- Grid container -->

<div class="grid-container">

  <header>
    <h1 class="projects-div-h1">Projects</h1>
    <p class="projects-div-p">On this page, you can find out about current and recent projects for grid development.</p>
  </header>

</div>

---

如果将样式

.navbar

和

.grid container

替换为这些样式。您将获得相同的视觉效果，但没有让您担心的问题

.navbar {
    width: 100%;
    height: 6.3rem;
    top: 0;
    display: flex;
    justify-content: center;
    font-size: 1.15rem;
    color: #333333;
    font-weight: 600;
    position: sticky;
}

.grid-container {
    display: grid;
    outline: green solid thin;
    grid-template-rows: repeat(8, 12.5%);
    grid-template-columns: repeat(4, 25%);
}

---

检查器工具提示误导了您。。。尝试应用

边框：3倍纯红在主体上。。。您将看到它从页面顶部开始。
.navbar {
    width: 100%;
    height: 6.3rem;
    top: 0;
    display: flex;
    justify-content: center;
    font-size: 1.15rem;
    color: #333333;
    font-weight: 600;
    position: sticky;
}

.grid-container {
    display: grid;
    outline: green solid thin;
    grid-template-rows: repeat(8, 12.5%);
    grid-template-columns: repeat(4, 25%);
}