why dropdrow menu is not in the center

I need my dropdown menu under About menu and align in center of about menu. And when my site in moblie size dropdown are not in the center, They are on the right of site. I tried to coding dropdown link1hhh, link2, link3 to be the center but it's not align. What's wrong about html, css code so I want Dropdown be like this. Thanks

const body = document.querySelector("body");
const navbar = document.querySelector(".navbarr");
const menuBtn = document.querySelector(".menu-btn");
const cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = ()=>{
  navbar.classList.add("show");
  menuBtn.classList.add("hide");
  body.classList.add("disabled");
}
cancelBtn.onclick = ()=>{
  body.classList.remove("disabled");
  navbar.classList.remove("show");
  menuBtn.classList.remove("hide");
}
window.onscroll = ()=>{
  this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
}

.navbarr{
  padding-top: 85px;
  padding-bottom: 30px;
  background: #ffffff;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 2;
  transition: all 0.3s ease;
}
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;

}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;

}
.dropdown:hover .dropdown-content {
  display: block;
  }
.navbarr.sticky{
  background: #ffffff;
  padding: px 0;
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbarr .content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbarr .logo a{
  color: #000000;
  font-size: 30px;
  text-decoration: none;
}
.navbarr .menu-list{
  display: inline-flex;
}
.menu-list li{
  list-style: none;
}
.menu-list li a{
  color: #000000;
  margin-left: 25px;
  text-decoration: none;
  font-weight: normal;
  transition: all 0.3s ease;
}

.icon{
  color: #000000;
  font-size: 25px;
  cursor: pointer;
  display: none;
}
.menu-list .cancel-btn{
  position: absolute;
  right: 80px;
  top: 110px;
}
@media (max-width: 1230px) {
  .content{
    padding: 0 60px;
  }
}
@media (max-width: 1100px) {
  .content{
    padding: 0 40px;
    margin-left: 5%;
    margin-right: 5%;
  }
}
@media (max-width: 900px) {
  .content{
    padding: 0 40px;
    margin-left: 0%;
    margin-right: 0%;
  }
  .menu-list .cancel-btn{
    position: absolute;
    right: 50px;
    top: 110px;
  }
}
@media (max-width: 1000px) {
  body.disabled{
    overflow: hidden;
  }
  .icon{
    display: block;
  }
  .icon.hide{
    display: none;
  }
  .navbarr .menu-list{
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 100%;
    right: -100%;
    top: 0px;
    display: block;
    padding: 100px 0;
    text-align: center;
    background: rgb(255, 255, 255);
    transition: all 0.3s ease;
  }
  .navbarr.show .menu-list{
    right: 0%;
  }
  .navbarr .menu-list li{
    margin-top: 45px;
  }
  .navbarr .menu-list li a{
    font-size: px;
    margin-right: -100%;
  }
  .navbarr.show .menu-list li a{
    margin-right: 0px;
  }
}

<nav class="navbarr">
      <div class="content">
        <div class="logo">
          <a href="#"><img src="" width="80" height="80" alt="" /></a>
        </div>
        <ul class="menu-list">
          <div class="icon cancel-btn">
            <i class="fas fa-times"></i>
          </div>  
          <li><a href="menu.html">Menu</a></li>
          <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn">About</a>
            <div class="dropdown-content">
              <a href="#">Link 1hhh</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
          <li><a href="Contact.html">Contact</a></li>
        </ul>
        <div class="icon menu-btn">
          <i class="fas fa-bars"></i>
        </div>
      </div>
    </nav>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
          <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">

from Recent Questions - Stack Overflow https://ift.tt/3xCLvHE
https://ift.tt/3nxhofQ