How to center the menu in the mobile version of the site?

V

Vasily Markov2021-02-21 14:12:55

Layout

Vasily Markov, 2021-02-21 14:12:55

Good afternoon!

I am at the very beginning of learning web development. Taking a short course in HTML and CSS, taking a short course on openclassrooms.com. It is necessary to solve the problem: to make the simplest site, which, using Media queries, is converted into a mobile version. Everything turned out except one: I can’t make the menu in the mobile version displayed in the center (at an equal distance from the right and left) sides of the screen.

I just didn't shove anything into CSS, I centered it in different ways, I ran out of ideas... Help, please!

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;
            }
     }