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

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <title>Media queries</title>
    <style>
      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;
      }
    </style>
  </head>
  <body>
    <nav>
      <ul>
        <li>Main page</li>
        <li>About us</li>
        <li>Contact us</li>
      </ul>
    </nav>
  </body>
</html>