How do I create a responsive navigation menu using only HTML and CSS?

<!-- BEGIN COPY / PASTE -->
    <nav>
      <ul class="nav-menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
    <style>
      .nav-menu {
        list-style-type: none;
        padding: 0;
        display: flex;
        justify-content: space-around;
      }
      .nav-menu li {
        margin: 0 10px;
      }
      .nav-menu a {
        text-decoration: none;
        color: black;
        padding: 8px 16px;
        display: block;
      }
      @media (max-width: 600px) {
        .nav-menu {
          flex-direction: column;
          align-items: center;
        }
      }
    </style>
    <!-- END COPY / PASTE -->