Navbar dropdown menu placed slighly to the right

Question

So, I'm trying to make a navbar dropdown menu but when I hover over the London tab, the dropdown menu is slightly placed to the right. I have no idea why this is happening, I dont know why its just not centered right under the London tab and I've also tried multiple solutions (which have worked in the past), for example, I tried to do left: 0px; or right: 0px; but that just placed the dropdown menu to the left of my screen or to my right.

I dont know how to make the dropdown menu centered so its just below the London tab. Any help or advice would be appriciated!

body {
    margin: 0;
}
.nav {
    background-color: rgb(24, 24, 24);
    box-shadow: 10px 10px 10px white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 3em;
    justify-content: center;
}
.navlogo img {
    height: 40px;
}
.dropbtn {
    color: rgb(53, 53, 53);
    font-family: Montserrat;
    font-size: 18px;
    border: none;
    transition: all 200ms ease-in;
}
.drop-content-london {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    width: 80px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    top: 69.8px;
    text-align: center;
}
.drop-content-london a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: all 200ms ease-in;
    font-size: 12px;
}
.dropdown {
    transition: all 200ms ease-in;
    border-radius: 10px;
    padding: 1em;
}
.dropdown:hover .drop-content-london {display: block;}

.drop-content-london a:hover {background-color: #ddd;}

.drop-content-paris {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    width: 57px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    top: 69.8px;
    text-align: center;
}
.drop-content-paris a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: all 200ms ease-in;
    font-size: 9px;
}
.drop-content-paris {
    transition: all 200ms ease-in;
}
.dropdown:hover .drop-content-paris {display: block;}

.drop-content-paris a:hover {background-color: #ddd;}

.drop-content-tokyo {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    width: 63px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    top: 69.8px;
    text-align: center;
}
.drop-content-tokyo a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;    
    transition: all 200ms ease-in;
    font-size: 10px;
}
.drop-content-tokyo {
    transition: all 200ms ease-in;
}
.dropdown:hover .drop-content-tokyo {display: block;}

.drop-content-tokyo a:hover {background-color: #ddd;}

.dropdown:hover .dropbtn {
    text-decoration: underline 2px rgba(255, 0, 0, 0.733);
    text-underline-offset: 6px;
    color: rgb(199, 199, 199);
}
@media only screen and (min-width: 530px) {
    .dropbtn {
        margin: 0.5rem 1rem;
    }
    .drop-content-london {
        width: 131.73px;
    }
    .drop-content-tokyo {
        width: 106.61px;
    }
    .drop-content-paris {
        width: 114.53px;
    }
    .drop-content-london a {
        font-size: 16px;
    }
    .drop-content-tokyo a {
        font-size: 16px;
    }
    .drop-content-paris a {
        font-size: 16px;
    }
}

        <nav>
            <div class="nav">
                <div class="navlogo">
                    <img src="logo.png" alt="">
                </div>
                <div class="dropdown">
                    <div class="dropbtn">London</div>
                    <div class="drop-content-london">
                        <a href="#" target="_">Overview</a>
                        <a href="https://en.wikipedia.org/wiki/London" target="_">Wikipedia</a>
                        <a href="#">Gallery</a>
                    </div>
                </div>
                <div class="dropdown">
                    <div class="dropbtn">Paris</div>
                    <div class="drop-content-paris">
                        <a href="#">Overview</a>
                        <a href="#">Wikipedia</a>
                        <a href="#">Gallery</a>
                    </div>
                </div>
                <div class="dropdown">
                    <div class="dropbtn">Tokyo</div>
                    <div class="drop-content-tokyo">
                        <a href="#">Overview</a>
                        <a href="#">Wikipedia</a>
                        <a href="#">Gallery</a>
                    </div>
                </div>
            </div>
        </nav>

Answer 1

Seems as if the root of the issue is margin, along with the absolute positioning on the drop-content-"country" classes. You'll notice if you remove the display: none; and the position: absolute; from that class, the dropdown content is perfectly centered. (as long as you add text-align: center; to dropbtn). But this messes with the functionality of the menu itself.

No need to worry there is an easy fix. Just simply add these styles to your dropdown class.

.dropdown {
  display: inline-flex;
  justify-content: center;
}

See it working here:

body {
  margin: 0;
}

.nav {
  background-color: rgb(24, 24, 24);
  box-shadow: 10px 10px 10px white;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 3em;
  justify-content: center;
}

.navlogo img {
  height: 40px;
}

.dropbtn {
  color: rgb(53, 53, 53);
  font-family: Montserrat;
  font-size: 18px;
  border: none;
  transition: all 200ms ease-in;
}

.drop-content-london {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 80px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  top: 69.8px;
  text-align: center;
}

.drop-content-london a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: all 200ms ease-in;
  font-size: 12px;
}

.dropdown {
  transition: all 200ms ease-in;
  border-radius: 10px;
  padding: 1em;
  display: inline-flex;
  justify-content: center;
}

.dropdown:hover .drop-content-london {
  display: block;
}

.drop-content-london a:hover {
  background-color: #ddd;
}

.drop-content-paris {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 57px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  top: 69.8px;
  text-align: center;
}

.drop-content-paris a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: all 200ms ease-in;
  font-size: 9px;
}

.drop-content-paris {
  transition: all 200ms ease-in;
}

.dropdown:hover .drop-content-paris {
  display: block;
}

.drop-content-paris a:hover {
  background-color: #ddd;
}

.drop-content-tokyo {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 63px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  top: 69.8px;
  text-align: center;
}

.drop-content-tokyo a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: all 200ms ease-in;
  font-size: 10px;
}

.drop-content-tokyo {
  transition: all 200ms ease-in;
}

.dropdown:hover .drop-content-tokyo {
  display: block;
}

.drop-content-tokyo a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropbtn {
  text-decoration: underline 2px rgba(255, 0, 0, 0.733);
  text-underline-offset: 6px;
  color: rgb(199, 199, 199);
}

@media only screen and (min-width: 530px) {
  .dropbtn {
    margin: 0.5rem 1rem;
  }
  .drop-content-london {
    width: 131.73px;
  }
  .drop-content-tokyo {
    width: 106.61px;
  }
  .drop-content-paris {
    width: 114.53px;
  }
  .drop-content-london a {
    font-size: 16px;
  }
  .drop-content-tokyo a {
    font-size: 16px;
  }
  .drop-content-paris a {
    font-size: 16px;
  }
}

<nav>
  <div class="nav">
    <div class="navlogo">
      <img src="logo.png" alt="">
    </div>
    <div class="dropdown">
      <div class="dropbtn">London</div>
      <div class="drop-content-london">
        <a href="#" target="_">Overview</a>
        <a href="https://en.wikipedia.org/wiki/London" target="_">Wikipedia</a>
        <a href="#">Gallery</a>
      </div>
    </div>
    <div class="dropdown">
      <div class="dropbtn">Paris</div>
      <div class="drop-content-paris">
        <a href="#">Overview</a>
        <a href="#">Wikipedia</a>
        <a href="#">Gallery</a>
      </div>
    </div>
    <div class="dropdown">
      <div class="dropbtn">Tokyo</div>
      <div class="drop-content-tokyo">
        <a href="#">Overview</a>
        <a href="#">Wikipedia</a>
        <a href="#">Gallery</a>
      </div>
    </div>
  </div>
</nav>