header includes a h1 element.

I added to header: but a vertical scrollbar appeared. I removed it by adding the overflow-hidden class in body, but the header is not vertically centered (it's a little below the x-axis center).

Notice: If I remove the navigation, the vertical centering works.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav >
  <div >
    <span >Βάκχος</span>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
            </button>
    <div  id="navbarNav">
      <ul >
        <li >
          <a href="#"  aria-current="page">Αρχική</a>
        </li>
        <li >
          <a href="#"  id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Ανέκδοτα</a>
          <ul  aria-labelledby="navbarDropdownMenuLink">
            <li><a href="#" >Με βιλία</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<main>
  <header >
    <h1 >Όταν οι