title: How do I make this Navbar stick correctly?
body: <p>The Navigation Bar sticks, but I followed some basic instructions on how to make it stick, which included <code>position: fixed; width: 100%; top: 0;</code>But the issue is that it covers up a portion of the page which is the height of it (40px) Now when someone clicks on the navbar links (which are linked to the <code>&lt;h3&gt;</code>'s), the <code>&lt;h3&gt;</code>'s are covered up by the Navbar. I don't know how to fix this. </p>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link href="./stylesheets/main.css?v6.00000000000016" rel="stylesheet" type="text/css"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&amp;display=swap" rel="stylesheet"&gt;
    &lt;link href="./favicon.ico" rel="icon" type="image/ico"&gt;
    &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header&gt;
      &lt;nav&gt;
        &lt;a class="link linkanim" href="#introduction"&gt;Introduction&lt;/a&gt;
        &lt;a class="link linkanim" href="#begin"&gt;Getting Started&lt;/a&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
    &lt;main&gt;
      &lt;section&gt;
        &lt;h1&gt;Test&lt;/h1&gt;
        &lt;div class="text-container"&gt;
          &lt;p id="notice"&gt;&lt;span style="font-weight: bold;"&gt;NOTE&lt;/span&gt;: This website will not work/render correctly on mobile devices, I'm just getting started on advanced HTML and CSS. Besides that, this website isn't interactive. Means that I haven't implemented JavaScript. I'm learning that next.&lt;/p&gt;
          &lt;h3 id="introduction"&gt;Introduction:&lt;/h3&gt;
          &lt;p id="hello"&gt;Content&lt;/p&gt;
          &lt;p id="improvements"&gt;Content mail to send emails:&lt;a class="email-address" href="You seriously thought i was going to forget to remove my email here? hehheheheh!"&gt;Click here to send an E-Mail...&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/section&gt;
      &lt;section&gt;
        &lt;div class="text-container"&gt;
          &lt;h3 id="begin"&gt;Let's begin&lt;/h3&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
          &lt;p&gt;Content&lt;/p&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    &lt;/main&gt;
    &lt;footer&gt;
      &lt;div class="icocredit"&gt;Title Favicon made by &lt;a href="https://www.flaticon.com/authors/freepik" title="Freepik"&gt;Freepik&lt;/a&gt; from &lt;a href="https://www.flaticon.com/" title="Flaticon"&gt;www.flaticon.com&lt;/a&gt; | Made by TimmSkiller (not Copyrighted) | My first real Website&lt;/div&gt;
    &lt;/footer&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre class="lang-css prettyprint-override"><code>
  * {
    margin: 0;
    padding: 0;
    font-family: Roboto;
  }
  
  header {
    box-sizing: border-box;
    max-height: 40px;
  }
  
  main {
    box-sizing: border-box;
  }
  
  main section h1 {
    margin-top: 70px;
    text-align: center;
    font-size: 30px;
    font-weight: 400;
  }
  
  main section div h3 {
    text-align: left;
    height: calc(23px + 19px);
  }
  
  .text-container p {
    word-wrap: break-word;
  }
  
  .text-container {
    max-width: 900px;
    margin: 0 auto;
  }
  
  #hello {
    height: 285px;
  }
  
  #notice {
    height: 76px;
  }
  
  #improvements {
    height: calc(19px + 133px)
  }
  
  nav {
    position: fixed;
    width: 100%;
    top: 0;
    padding: 5.5px;
    background-color: #e5e5e5;
    margin-bottom: 20px;
  }
  
  .email-address {
    text-decoration: none;
  }
  
  .link {
    padding: 5.5px;
    display: inline-block;
    font-size: 15px;
    color: black;
    text-decoration: none;
    border-radius: 12px;
    transition-duration: 0.75s;
  }
  
  .link:hover {
    background-color: #bebebe;
  }
  
  .link:active {
    background-color: #909090;
  }
  
  .icocredit {
    position: relative;
    font-size: small;
    bottom: 1px;
    left: 1px;
    display: inline-block;
  }
  
  .icocredit a {
    text-decoration: none;
  }
  </code></pre>
  
  <p>I don't want the navbar covering up the h3 elements, so they are readable.</p>
  
  <p>EDIT: I have tried adding <code>padding-top: 40px</code> on <code>body {}</code>, doesn't work.
  A link for proof: <a href="https://giphy.com/gifs/kEWEyxYauaI0yXxOUQ" rel="nofollow noreferrer">GIPHY</a>
  Edit 4: Code has changed and so did the question (50px > 40px)</p>