I'm currently working on creating a navigation bar using two nested flex boxes within one parent container. However, I'm facing difficulty in styling the inner flexbox without impacting the main container items. Here is how my layout is supposed to look like: navbar-idea
Below is a snippet of my code:
*,
*::after,
*::before,
* li {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
html {
font-size: 62.5%;
}
.main-navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 4rem;
}
.link-container {
display: flex;
}
.user-feature {
display: flex;
}<nav class="main-navbar">
<div class="div-1 link-container">
<ul class="link-container">
<li><a>HOME</a></li>
<li><a>CONTACT</a></li>
<li><a>ABOUT</a></li>
</ul>
</div>
<div class="image-container">
<img src="https://www.theodinproject.com/assets/icons/odin-icon-b5b31c073f7417a257003166c98cc23743654715305910c068b93a3bf4d3065d.svg" alt="">
</div>
<div class="div-2">
<ul class="user-feature feature-container">
<li><a>LOG IN</a></li>
<li><a>CART</a></li>
</ul>
</div>
</nav>Currently, everything appears fine until I try to apply padding to the link-container which then affects the main-navbar items. Additionally, I'm struggling to vertically center align the logo. Is it possible to achieve this with flexbox?
I am curious to know what could be causing flex to behave in this manner.