Can't get the <ul> to shift to the right of container using margin-auto?

August 11, 2023

So, I would like the to be on the right of the container, so I set margin-left to auto but it is having no effect, why? And how can I shift it right without using flexbox?

nav {
    width: 50%;
    background-color: #FFCD07;
    padding-top: 1.5rem;
}

ul{
    margin-left: auto;
}

<nav>
    <ul class="nav-list">
        <li><a href="#">Palestra</a></li>
        <li><a href="#">Arte Marziali</a></li>
        <li><a href="#">Orari</a></li>
        <li><a href="#">News</a></li>
    </ul>       
</nav>

>Solution :

the ul is a block-level element and as such has a width of auto which lets the element span the entire possible horizontal space. To align the list to the right, the width has to be smaller such as max-content

nav {
  width: 50%;
  background-color: #FFCD07;
  padding-top: 1.5rem;
}

ul {
  width: max-content;
  margin-left: auto;
}

<nav>
  <ul class="nav-list">
    <li><a href="#">Palestra</a></li>
    <li><a href="#">Arte Marziali</a></li>
    <li><a href="#">Orari</a></li>
    <li><a href="#">News</a></li>
  </ul>
</nav>