Technical Documentation Project

I am super lost here why are my links sticking to the bottom of the header (black strip)? Why is my Economy text stuck behind said black strip? and why is the black strip cutting off before the end of the right side of the webpage even though it specifies width:100%;?

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="technical documentation page"/>
    <link rel="stylesheet" href="styles.css" />
    <title>Tech. Doc.</title>
  </head>
  <main id="main-doc">
    <body>
        <header id="top-head">
          <h1>Economy</h1>
          </header>
          <nav id="navbar">
            <header id="nav-head">
        <a class="nav-link" href="#Taxes_Paid">Taxes Paid</a>
        <a class="nav-link" href="#Taxes_Owed">Taxes Owed</a>
        <a class="nav-link" href="#Loans">Loans</a>
        <a class="nav-link" href="#Debt">Debt</a>
        <a class="nav-link" href="#Expenses">Expenses</a>
        </header>
      </nav>
      <div id="content-div">
  <section class="main-section" id="Taxes_Paid">
    <header>Taxes Paid</header>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Taxes_Owed">
    <header>Taxes Owed</header>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Loans">
    <header>Loans</header>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Debt">
    <header>Debt</header>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  <section class="main-section" id="Expenses">
    <header>Expenses</header>
    <p>$</p>
    <p>$</p>
    <code>#</code>
    <li>3</li>
  </section>
  </div>
  </body>
  </main>
</html>

CSS

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}
body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Lucida Console;
  margin: 0;
}
h1{
  z-index:1;
  color:white;
}
#nav-head {
  width: 100%;
  height: 100px;
  background-color: #1b1b32;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
}
#nav-head{
  width:500px;
  padding-left:50px;
  align-items:last baseline;
}
#content-div{
  margin-top:69px;
}

What display are you using for the header? How are you aligning the items in the header?

What sort of positioning are you using on the header? Do you understand what that will do to the header? If there is content underneath the header, then what could you do to move it out from underneath the header (i.e. push it downward so that it isn’t covered up by the header)?

I would double check that the width is really 100%. Use the browser’s inspector tool to verify what the width is set to.