How do I get my centered in my nav

Question

.ul_center{
    margin: 0 auto;
}
    
.li_center{
    list-style: none;
    padding: 5px;
    background-color: yellow;
    display: inline-block;
}

<nav>
    <ul class="ul_center">
        <li class="li_center">testing1</li>
        <li class="li_center">testing2</li>
        <li class="li_center">testin3</li>
        <li class="li_center">testing4</li>
        <li class="li_center">testing5</li>
    </ul>
</nav>

How do I get my <li> centered on my screen. I thought it would work with margin: 0 auto; but it’s not working.

Answer 1

Add this code:

.ul_center{
    text-align: center;
}

So all you need to do is replace the margin with text-align and you should be good.

Answer 2

Margin: auto only works if you specify a width to the element

I create this jsfiddle for you ;) to show you the result :

.ul_center{
    margin: 0 auto;
    width: 200px;
}