Nav bar padding and margins not reacting as expected - html

Question

There seems to be an issue with my dropdown class and li class formatting (specifically padding/margins) not interacting as expected. The two-page selections with dropdown menus are getting extra padding from somewhere when I add left margins in the li CSS. while trying to fix that issue I also discovered that the padding between the nav text (in li a) isn't acting right either. I'm not sure where to go from here as I'd like to add a logo to the left side of the nav but can't move the nav text around properly.
The StackOverflow built-in HTML CSS console runs it weird, 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">About</li>
<div class="dropdown-content">
My Story
</div>
</div>
<li class="Packages">Packages</li>
<div class="dropdown">
<li class="Events">Events</li>
<div class="dropdown-content">
Weddings
School Celebrations
Corporate Events
Special Occasions
</div>
</div>
<li class="Reviews">Reviews </li>
<li class="Gallery">Gallery </li>
<li class="Resourses">Resourses </li>
<li class="Contact">Contact </li>
<li style="float:right"><a class="booking" href="https:">Book Now!</a></li>
</ul>