Как отцентровать меню в мобильной версии сайта?

Добрый день!

Я в самом начале изучения веб-разработки. Прохожу маленький курс по HTML и CSS, прохожу короткий курс на openclassrooms.com. Надо решить задачку: сделать простейший сайт, который с использованием Media queries преобразовывается в мобильную версию. Получилось все кроме одного: не могу сделать так, чтобы меню в мобильной версии отображалось по центру (на равном расстоянии от правой и левой) сторон экрана.

Я уже что только не пихал в CSS, центровал по-всякому, идеи закончились... Помогите, пожалуйста!

HTML

<!doctype html>

<html lang="en">

        <head>
    
    <!-- GENERAL INFO -->
    <title>My favorits</title>
    <meta charset="utf-8">
    <meta name="description" content="My preferences">
    <meta name="viewport" content="width=device-width" />
    
    <!-- LINKS TO CSS FILE ("STYLESHEET") AND SITE ICON -->
    <link href="css/style.css" type="text/css" rel="stylesheet">
        
        </head>
    
    <body>

    <nav>
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
    </nav>
    
    <p>
    <h1>Hi, over there! I'm Vassiliy and I'll show you some of my cool projects!</h1>
    </p>
    
    <ul>
            <li id="one">1</li>
            <li id="two">2</li>
            <li id="three">3</li>
    </ul>
        
    </body>
    
</html>

CSS

nav {
    background-color: #E8D7FF;
    padding: 10px;
    margin: -8px;
    text-align: center;
}

a {
    font-weight: 200;
    text-decoration: none;
    font-family: Helvetica;
    color: #151814;
    display: inline-block;
    width: 20%;
    text-align: center;
}

a:hover {
    text-transform: lowercase;
    }

ul {
    text-align: center;
    padding: 0px;
}

li {
    list-style: none;
    display: inline-block;
    margin: 0px 20px;
    padding: 20px;
}

#one {
    font-size: 50px;
    font-weight: bold;
    background-color: red;
    border: 10px;
    padding: 50px;
    border: solid;
    border-color: yellow;
    border-width: thick;
}

#two {
    font-size: 50px;
    font-weight: bold;
    background-color: DeepPink;
    border: 10px;
    padding: 50px;
    border: solid;
    border-color: yellow;
    border-width: thick;
}

#three {
    font-size: 50px;
    font-weight: bold;
    background-color: blue;
    border: 10px;
    padding: 50px;
    border: solid;
    border-color: yellow;
    border-width: thick;
}

@media all and (max-width: 320px) 
    {
        li {
        text-align: center;
        display: block;
        margin: 5px 0px;
        padding: 0px;
           }
           
        nav {
        margin: 5 0;
        display: block;
        text-align: center;
            }
     }