I am relatively new to CSS and struggling with getting the Inline-block code to work on my project. My goal is to horizontally align the links in my navbar menu instead of having them stacked vertically.
<nav class="navbar">
<div class="max-width">
<div class="logo"><a href="#">Roulathul <span>Uloom.</span></a></div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Teams</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
Here is my HTML code for the navbar.
.navbar .menu .li{
list-style: none;
display: inline-block;
}
I have used the display property with inline-block but it's not rendering as expected. Any suggestions or tips would be greatly appreciated!