I have my navbar on another page, but I would like to center it directly under the logo or image. My align-items property doesn't seem to work, so I've had to set the height in the .logo class. Is there any other method I can use to achieve this?
<header class="header" id="header">
<div class="logo">
<img src="img/logo/logo.png" alt="Logo Fim Produkcji">
</div>
<nav class="nav__menu">
<ul>
<li><a href="#faq__section">FAQ</a></li>
<li><a href="#contact__section">Kontakt</a></li>
<li><a href="#gallery__section">Portfolio</a></li>
</ul>
</nav>
</header>
css
*{
margin:0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.header, .gallery__section{
height: 100vh;
}
.gallery__section{
background-image: url(https://picsum.photos/1920/1080);
}
header{
background-image: url(https://picsum.photos/1920/1080);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.logo{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.logo img{
max-width: 200px;
width: 100%;
height: auto;
}
.nav__menu{
display: flex;
justify-content: center;
align-items: center;
}
.nav__menu ul li {
display: inline-block;
}