When the user clicks a link to browse the website, the navigation bar is not closed?

I have tried adding a click event listener to each link to close the navigation bar, but it doesn't work! Also, the hamberberger menu icon in the active position (i.e. the X) is not well aligned. But the main problem is that the navigation bar collapses when clicked.

$(document).ready(function() {
  $('.container').click(function() {
    $('.navbar .menu').toggleClass("active");
  });
});
function myFunction(x) {
x.classList.toggle("change");
}
        

@media (max-width: 1104px) {
.about .about-content .left img {
    height: 350px;
    width: 350px;
}
}

@media (max-width: 991px) {
.max-width {
    padding: 0 50px;
}
}

@media (max-width: 947px) {
.menu-btn {
    display: block;
    z-index: 999;
}
/* .menu-btn i.active:before {
    content: "\f00d";
} */
.navbar .menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    left: -100%;
    top: 0;
    background: #111;
    text-align: center;
    padding-top: 80px;
    transition: all 0.3s ease;
}
.navbar .menu.active {
    left: 0;
}
.navbar .menu li {
    display: block;
}
.navbar .menu li a {
    font-family: 'Josefin Sans', sans-serif;
    display: inline-block;
    margin: 20px 0;
    font-size: 25px;
}
}
.navbar {
  position: fixed;
  width: 100%;
  z-index: 999;
  padding: 30px 0;
  font-family: 'Ubuntu', sans-serif;
  transition: all 0.3s ease;
}

.navbar.sticky {
  padding: 15px 0;
  background: crimson;
}

.navbar .max-width {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .logo a {
  position: relative;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'Orbitron', sans-serif;
  border: 3px solid #fff;
  padding: 0px 10px;
  text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5);
  box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%);
  letter-spacing: 2px;
}

.navbar .logo a::after {
  content: 'PANDEY';
  position: absolute;
  font-size: 15px;
  font-weight: bold;
  bottom: -12px;
  /* color: crimson; */
  right: 15px;
  background: crimson;
  border-radius: 5px;
  /* box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); */
  padding: 0px 4px;
  letter-spacing: 2px;
}

.navbar .logo a span {
  color: crimson;
  transition: all 0.3s ease;
}

.navbar.sticky .logo a::after {
  border-radius: 4px;
  background: #fff;
  color: crimson;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9);
}

.container {
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
}

.bar1 {
  width: 35px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.bar2 {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.bar3 {
  width: 15px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: translate(0, -6px) rotate(40deg);
  width: 35px;
}

.navbar.sticky .logo a span {
  color: #fff;
}

.navbar .menu li {
  list-style: none;
  display: inline-block;
}

.navbar .menu li a {
  font-family: 'Josefin Sans', sans-serif;
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  transition: color 0.3s ease;
}

.navbar .menu li a:hover {
  position: relative;
  color: #fff;
}

.navbar.sticky .menu li a:hover {
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1  /jquery.min.js"></script>
<nav class="navbar">
  <div class="max-width">
    <div class="logo"><a href="#">Chhailbihari</a></div>
    <ul class="menu">
      <li class="menu-btn"><a href="#home">Home</a></li>
      <li class="menu-btn"><a href="#about">About</a></li>
      <li class="menu-btn"><a href="#services">Services</a></li>
      <li class="menu-btn"><a href="#skills">Skills</a></li>
      <li class="menu-btn"><a href="#contact">Contact</a></li>
    </ul>
    <div class="menu-btn">
      <div class="container" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </div>
    </div>
  </div>
</nav>