Content in body is in navbar

March 8, 2023

im trying to create a responsive website with html and css
Ive just completed the navbar but ive noticed an issue
the content of my body is overflowing into the navbar

<body>
    <div class="navbar">
        <h1>test</h1>
        <div style="justify-content: space-evenly;display:flex;">
            <a class="test">
                <u><h2>test</h2></u>
            </a>
            <a class="test">
                <u><h2>test</h2></u>
            </a>
            <a class="test">
                <u><h2>test</h2></u>
            </a>
        </div>
    </div>
    <div class="main">
        Test
    </div>
</body>


body {
    height: 100dvh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
    align-items: center;
}

.navbar {
    position: fixed;
    text-align: center;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

The div main is inside of the navbar and hidden under it

how do I prevent this ?

Ive tried to set a margin but for some reason it still remained inside of the navbar

just a bit further into it

>Solution :

Position fixed changes the way the element occupies the space in the box. Either change the navbar’s position property to static, or add top margin to the .main element

body {
  height: 100dvh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: center;
}

.navbar {
  position: static;  // <-- changed fixed to static
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}

<body>
  <div class="navbar">
    <h1>test</h1>
    <div style="justify-content: space-evenly;display:flex;">
      <a class="test">
        <u><h2>test</h2></u>
      </a>
      <a class="test">
        <u><h2>test</h2></u>
      </a>
      <a class="test">
        <u><h2>test</h2></u>
      </a>
    </div>
  </div>
  <div class="main">
    Test
  </div>
</body>