How can I center a 'ul'?

Question

I'm trying to center a ul for mobiles. This is my HTML code:

<nav>
    <ul class="nav-items">
        <li class="nav-active"><a href="/">Home</a></li>
        <li class="nav-item"><a href="#nav-active">Fruits</a></li>
        <li class="nav-item"><a href="#nav-inactive">Veggies</a></li>
    </ul>
</nav>

My CSS code:

.nav-items {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   font-weight: normal;
   justify-content: flex-end;
   margin-right: 30px;
   margin-top: 20px;
}

And I kept a media query for phones:

@media screen and (max-width: 500px) {
   .nav-items {
       margin: auto;
   }
}

How can I make the ul center (for phones)?

This is what I actually wanted:

Answer 1

File style.css

@media screen and (max-width: 500px) {
    .nav-items {
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.sub-items {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}

}

File index.html

<ul class="nav-items">
    <ul class="sub-items">
    <li class="nav-active"><a href="/">Home</a></li>
    <li class="nav-item"><a href="#nav-active">Fruits</a></li>
    </ul>
    <li class="nav-item"><a href="#nav-inactive">Veggies</a></li>
</ul>