I'm facing an issue with element positioning and text alignment. The navigation container consists of three elements: logo, title, and nav-list. You can find the code on CodePen.
/**{
margin: 0;
padding: 0;
box-sizing: border-box;
}*/
header {
background-color: orange;
url(../images/hero.jpg);
height: 600px;
background-size: cover;
}
.fixed-nav {
list-style: none;
}
.fixed-nav li {
display: inline-block;
}
nav {
display: flex;
justify-content: space-between;
padding: 30px 40px;
}
.logo {
height: 25px;
width: 120px;
}
.title {
color: white;
text-transform: uppercase;
font-family: "Avalors Personal Use", sans-serif;
}
.nav-menu {
display: flex;
gap: 1rem;
/* text-align: center;*/
list-style: none;
justify-content: center;
align-content: center;
}
.nav-menu li {
font-family: "Avenir LT Std", sans-serif;
display: inline-block;
color: white;
font-size: 16px;
}
.nav-menu li a {
text-decoration: none;
color: white;
/*padding-left:10px;
padding-right:10px;*/
}<header>
<ul class="fixed-nav">
<li>phone</li>
<li>whats</li>
<li>search</li>
</ul>
<nav class="navbar">
<a href="#" class="logo">
<img src="#" alt="logo" />
</a>
<h2 class="title">
title
</h2>
<ul class="nav-menu">
<li> <a href="#">HOME</a> </li>
<li> <a href="#">ABOUT</a> </li>
<li> <a href="#">PRODUCTS</a> </li>
<li> <a href="#">NEWS</a> </li>
<li> <a href="#">CONTACT</a> </li>
</ul>
</nav>
<h2>Slogan</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</header>I'm struggling to display the logo and title to the left and the nav-list to the right. When using flex to position them horizontally, the nav-list children appear at the top-left corner. You can see a demonstration here. I've tried using text-align, justify-content, but haven't been successful. Any insight would be greatly appreciated.