导航栏填充和边距未按预期反应

Question

我的下拉菜单类和li类的格式（特别是填充/边距）似乎无法按预期交互，这似乎是一个问题。当我在li CSS中添加左页边距时，带有下拉菜单的两页选择从某处获得了额外的填充。在尝试解决该问题时，我还发现导航文本（在li a中）之间的填充也不正确。我不确定要从这里到哪里，因为我想在导航的左侧添加徽标，但无法正确地移动导航文本。

StackOverflow内置HTML CSS控制台运行怪异的so here's the CodePen link

/* Nav Bar and Logo*/


/* Logo */

.logo {
  position: absolute;
  margin: 20px 0px 0px 0px;
}


/* nav-bar color and placement*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #0d0d0d;
  font-family: Verdana;
}


/* nav text side alighnment*/

li {
  float: left;
  margin-left: 100px;
}


/* nav text formating*/

li a {
  display: block;
  color: #98c94f;
  text-align: center;
  padding: 20px 20px;
  text-decoration: none;
}


/* Hovering on nav */

li a:hover:not(.active),
.dropdown:hover {
  background-color: #2a3b12;
  transition: 0.5s;
}


/* Current page your in*/

.active {
  background-color: #8bc33c;
  color: black;
  font-style: italic;
  padding: 19px 39px;
  font-size: 18px;
}


/* Far-side button*/

.booking {
  background-color: #3231ab;
  color: #f4f9ec;
}


/* drop-down text alighnment*/

.dropdown {
  float: left;
  overflow: hidden;
}


/* drop-down box format*/

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #d1e7b1;
  min-width: 160px;
  /* drop-down box shadow*/
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  /* drop box postion (directly under nav) */
  top: 67.5px;
}


/* drop-down text format*/

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


/* drop-down hover color*/

.dropdown-content a:hover {
  background-color: #bbdb8a;
  transition: 0.3s;
}


/* actavates drop-down when hovering */

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

<ul>

  <div class="logo">
    <a herf="#"><img src="DJ_Turntable_LOGO_3.png"></a>
  </div>

  <li class="Home"><a class="active" href="Index.html">Home</a></li>

  <div class="dropdown">
    <li class="About"><a href="About.html">About</a></li>
    <div class="dropdown-content">
      <a href="About-MyStory.html">My Story</a>
    </div>
  </div>

  <li class="Packages"><a href="Packages.html">Packages</a></li>

  <div class="dropdown">
    <li class="Events"><a href="Events.html">Events</a></li>
    <div class="dropdown-content">
      <a href="Events-Weddings.html">Weddings</a>
      <a href="Events-SchoolCelebrations.html">School Celebrations</a>
      <a href="Events-CorporateEvents.html">Corporate Events</a>
      <a href="Events-SpecialOccasions.html">Special Occasions</a>
    </div>
  </div>

  <li class="Reviews"><a href="Reviews.html">Reviews </a></li>

  <li class="Gallery"><a href="Gallery.html">Gallery </a></li>

  <li class="Resourses"><a href="Resourses.html">Resourses </a></li>

  <li class="Contact"><a href="Contact.html">Contact </a></li>

  <li style="float:right"><a class="booking" href="https:">Book Now!</a></li>

</ul>