I'm currently facing an issue with the CSS property
display: flex, align-items: centerHere is a snippet of my HTML and CSS files:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
.navbar {
background: #131313;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}
.navbar__item {
background: yellow;
}
.navbar__link {
border: 2px solid red;
}<body>
<div class="navbar">
<div class="nav__container">
<a href="/" id="navbar__logo">NEXT</a>
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
<a href="/" class="navbar__link">Home</a>
</li>
<li class="navbar__item">
<a href="/" class="navbar__link">Tech</a>
</li>
<li class="navbar__item">
<a href="/" class="navbar__link">Products</a>
</li>
<li class="navbar__item">
<a href="/" class="navbar__link">Sign Up</a>
</li>
</ul>
</div>
</div>
</body>I've spent hours searching for a solution to this problem but haven't found one yet.
Firstly, some items within the class = narbar__menu are hidden, and by commenting out align-item: center in .navbar in the CSS file, they reappear. Although I've researched about display: flex, I still can't figure it out.
Secondly, when I uncomment align-item: center in .navbar and increase the value of height in .navbar to 100px, the items are no longer hidden.
These two issues have me stumped, so any explanation would be greatly appreciated.
I've already checked out:
align-items: center makes img disappear
How to horizontally center an element
Any assistance would be highly valued. Thank you!