So I made a header and now I am trying to add content under the header but nothing shows up-CodePudding

Hello the problem that I'm facing is that the <h1> tag isn't showing up but it also is pushing down the header by a few inches and then once I get rid of the <h1> tag and refresh the header goes back to normal. I've also tried with <p> and the same thing happens. Does anyone know how I can fix this?

   #nav {
        position: absolute;
        left: 0px;
        height: 40px;
        background-color: #2c64b4;
        width: 100%;
        margin: 0 auto;
      }

      #nav ul {
        margin: 0;
        padding: 0px;
        list-style: none;
        text-align: center;
      }
      #nav ul li {
        margin: 0;
        padding: 0;
        display: inline-block;
      }
      #nav ul li a {
        text-decoration: none;
        padding: 10px 20px;
        display: block;
        color: #fff;
        text-align: center;
      }

   

    <body>
    <div id="nav">
      <ul>
        <li><a href="/index.html">PRACTICE</a></li>
        <li><a href="/ABOUT.html">ABOUT</a></li>
        <li><a href="/HOME.html">HOME</a></li>
        <li><a href="/CONTACT.html">CONTACT</a></li>
      </ul>
    </div>
    <h1>Hello</h1>
  </body>

CodePudding user response：

Your #nav has position: absolute

remove this. It will fix the problem

CodePudding user response：

The issue with your code is that position: absolute removes an element from the normal flow. Your <h1> was there, it was just behind the navigation.

I'm going to suggest a simplified approach using CSS Grid to layout the navigation and content, then position: sticky to stick the navigation to the top. And flex for the navigation

I also changed the HTML markup to use more semantically correct tags

* { box-sizing: border-box } body { font: 16px sans-serif; margin: 0 }


main {
  display: grid;
  grid-template-rows: auto 1fr; /* navbar and content */
}


nav {
  background-color: #2c64b4;
  color: #fff;
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: .5rem;
  position: sticky;
  top: 0;
}

nav a {
  color: currentColor;
  display: block;
  text-decoration: none;
  padding: .75rem 1.5rem;
}

<main>
  <nav>
    <a href="/index.html">PRACTICE</a>
    <a href="/ABOUT.html">ABOUT</a>
    <a href="/HOME.html">HOME</a>
    <a href="/CONTACT.html">CONTACT</a>
  </nav>
  <section>
    <h1>Hello</h1>
    <p>Adipiscing enim sit elementum ligula senectus litora massa a scelerisque primis hac sociis a ante lorem scelerisque vehicula metus imperdiet conubia tellus eu id. Montes accumsan a ullamcorper vitae interdum vestibulum adipiscing justo in pretium quisque ipsum sem aliquet sociis vestibulum rhoncus scelerisque dis tempus volutpat fames ante est. Diam condimentum pulvinar condimentum magnis cubilia eleifend dui vestibulum per leo auctor accumsan mi scelerisque aliquet. Mi a rutrum montes nascetur ut feugiat a torquent parturient nullam vestibulum leo malesuada consequat non magna parturient curabitur fermentum mauris ullamcorper semper amet vulputate vestibulum.<p>
    <p>Adipiscing enim sit elementum ligula senectus litora massa a scelerisque primis hac sociis a ante lorem scelerisque vehicula metus imperdiet conubia tellus eu id. Montes accumsan a ullamcorper vitae interdum vestibulum adipiscing justo in pretium quisque ipsum sem aliquet sociis vestibulum rhoncus scelerisque dis tempus volutpat fames ante est. Diam condimentum pulvinar condimentum magnis cubilia eleifend dui vestibulum per leo auctor accumsan mi scelerisque aliquet. Mi a rutrum montes nascetur ut feugiat a torquent parturient nullam vestibulum leo malesuada consequat non magna parturient curabitur fermentum mauris ullamcorper semper amet vulputate vestibulum.<p>
    <p>Adipiscing enim sit elementum ligula senectus litora massa a scelerisque primis hac sociis a ante lorem scelerisque vehicula metus imperdiet conubia tellus eu id. Montes accumsan a ullamcorper vitae interdum vestibulum adipiscing justo in pretium quisque ipsum sem aliquet sociis vestibulum rhoncus scelerisque dis tempus volutpat fames ante est. Diam condimentum pulvinar condimentum magnis cubilia eleifend dui vestibulum per leo auctor accumsan mi scelerisque aliquet. Mi a rutrum montes nascetur ut feugiat a torquent parturient nullam vestibulum leo malesuada consequat non magna parturient curabitur fermentum mauris ullamcorper semper amet vulputate vestibulum.<p>
    <p>Adipiscing enim sit elementum ligula senectus litora massa a scelerisque primis hac sociis a ante lorem scelerisque vehicula metus imperdiet conubia tellus eu id. Montes accumsan a ullamcorper vitae interdum vestibulum adipiscing justo in pretium quisque ipsum sem aliquet sociis vestibulum rhoncus scelerisque dis tempus volutpat fames ante est. Diam condimentum pulvinar condimentum magnis cubilia eleifend dui vestibulum per leo auctor accumsan mi scelerisque aliquet. Mi a rutrum montes nascetur ut feugiat a torquent parturient nullam vestibulum leo malesuada consequat non magna parturient curabitur fermentum mauris ullamcorper semper amet vulputate vestibulum.<p>
  </section>
</main>