How can i align a center when its inside of and inside of a

Question

I would like to align my <li> center about the <nav> how can i do it ?

There is the code :

.html

<nav class="nav">
        <ul>
            <li>Home</li>
            <li>About</li>
        </ul>
</nav>

.css

.nav {
    border: 2px solid;
}

.nav ul li{
    border: 1px solid;
    padding: 10px;
    height: 30px;
    width: 100px;
    display: inline-block;
}

Answer 1

You just need to set text-align: center on nav and remove padding-left on ul

.nav {
  border: 2px solid;
  text-align: center;
}
ul {
  padding-left: 0;
}
.nav ul li {
  border: 1px solid;
  padding: 10px;
  height: 30px;
  width: 100px;
  display: inline-block;
}

<nav class="nav">
  <ul>
    <li>Home</li>
    <li>About</li>
  </ul>
</nav>