header contains an element of h1.
I made a modification to header: added the class "d-flex flex-column justify-content-center align-items-center min-vh-100", which caused a vertical scrollbar to appear. To fix this, I included the class "overflow-hidden" in the body, but unfortunately, the header is slightly off-center vertically (it's not perfectly aligned with the center axis).
Note: Removing the navigation component results in successful vertical alignment.
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be9e4e4fff8fff9eafbcbbea5baa5b8">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23414c4c57505751425363160d120d10">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Βάκχος</span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">Αρχική</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Ανέκδοτα</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a href="#" class="dropdown-item">Με βιλία</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<main>
<header class="d-flex flex-column justify-content-center align-items-center min-vh-100">
<h1 class="bg-primary">Όταν οι 🇬🇷 έφτιαχναν μιμς, οι άλλοι έτρωγαν βελανίδια και κρέμονταν από τα δέντρα!</h1>
</header>
</main>
<footer>
<p>Footer</p>
</footer>