How do I create a responsive navigation bar using HTML?

<!-- BEGIN COPY / PASTE -->
    <nav>
      <ul class="navbar">
        <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>
      .navbar {
        list-style-type: none;
        padding: 0;
        display: flex;
        justify-content: space-around;
        background-color: #333;
      }
      .navbar li {
        display: inline;
      }
      .navbar a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }
      .navbar a:hover {
        background-color: #ddd;
        color: black;
      }
      @media (max-width: 600px) {
        .navbar {
          flex-direction: column;
        }
      }
    </style>
    <!-- END COPY / PASTE -->