How to arrange the list in my navbar horizontally?-CodePudding

I am fairly new to css and while working on a project I couldn't get the Inline-block code to work, and I cant understand why. I want to arrange the links in my navbar menu horizontally rather than vertically.

<nav >
    <div >
        <div ><a href="#">Roulathul <span>Uloom.</span></a></div>
        <ul >
            <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>

This is my navbar HTML code.

.navbar .menu .li{
list-style: none;
display: inline-block;
}

And this is where I used the inline block. Any Tips?

CodePudding user response：

Use:

.menu {
  display: flex;
}

CodePudding user response：

This is how I mainly center my navbars, just use the display: flex and justify-content: to either space out the elements or center them. More info on the flex property

.menu{
list-style: none;
display: flex;
justify-content: space-evenly;
}