Your colleague added a navigation layout. But it won’t look very good on small devices.
Let’s tweak a bit. All changes should only show on screens smaller than 480px.
Navigation should be positioned at the top of the screen for its full width, with a height of 50px.
The font size of the list items should be 0.8rem (on mobile we don’t need such a large font).
The list itself should be displayed as a line with horizontal paddings of 10px.
The distance between list items and screen edges must be the same.

This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task


<!DOCTYPE html>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <title>Media queries</title>
      body {
        margin: 0;
        height: 100vh;
        font-family: monospace;
      nav {
        background-color: #000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 250px;
        height: 100%;
      li {
        color: white;
        list-style: none;
        margin: 20px 0;
        cursor: pointer;
        font-weight: bold;
        font-size: 1.5rem;
        transition: color 0.5s;
      li:hover {
        color: #EAE2B7;
        <li>Main page</li>
        <li>About us</li>
        <li>Contact us</li>