My latest project involves a menu with three separate divs: logo, nav-bar, and right-bar. I decided to use justify-content: space-around to position the elements - the logo on the left, navigation in the center, and right-bar on the right. However, when I applied white-space: nowrap to the links and added margin: 0 10%, my li elements ended up outside of the nav tag. How can I go about fixing this issue?
For reference, here is the link to the codepen: https://codepen.io/kartegi/pen/xxVzPLm?editors=1100
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style-type: none;
}
.menu {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
height: 80px;
background: green;
}
a {
white-space: nowrap;
color: #fff;
}
nav {
background: red;
}
.menu-list {
display: flex;
background: #000;
margin: 0 2.5%;
}
li {
margin: 0 10%;
}
.right-bar {
display: flex;
}
.search {
width: 20px;
height: 20px;
background: #000;
}
.language {
width: 20px;
height: 20px;
background: #fff;
}<div class="menu">
<div class="logo">
<a href="">Click me</a>
</div>
<nav class="navbar">
<ul class="menu-list">
<li><a href="#">About me</a></li>
<li><a href="#">My compony</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="right-bar">
<div class="search">
</div>
<div class="language">
</div>
</div>
</div>