Drop down menu isn't aligned - html

Question

I am currently making a website for a heli-skiing business and I am having trouble with the drop down menu. For some reason, it doesn't align correctly. I have looked at similar posts on this website for the answer and it seems that setting the position for the parent element to relative and setting the child element's position to absolute is the most common answer; however this isn't working for me. It's probably because I am applying it to the wrong parent/child elements; but I have attempted a lot of different options and nothing seems to work. Below is my code (I ran into issues with jsfiddle and I am too frustrated from other projects to mess with fixing another issue). I also know that my css code is a mess and needs to be cleaned up a bit. Thank you for any help
HTML:
<header>
<a name="top"></a>
<div class="header">
<div class="nav-a">
<ul class="menu">
<li class="menu-item-2667">Trips
<ul class="drop-down">
<li class="drop-down-items">Alaska Trip</li>
<li class="drop-down-items">Chile Trip</li>
<li class="drop-down-items">Argentina Trip</li>
</ul>
</li>
<li class="menu-item-20">Gallery</li>
</ul>
</div>
<div class="nav-b">
<ul class="menu">
<li class="menu-item-126">About</li>
<li class="menu-item-127">Contact</li>
</ul>
</div>
</div>
</header>
CSS:
ul, menu, dir{
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
ul, ol {
margin-left: 0;
}
ul, ol, dl {
font-size: 1em;
line-height: 1.6;
margin-bottom: 1.25em;
list-style-position: outside;
font-family: inherit;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
a {
color: red;
text-decoration: none;
line-height: inherit;
}
a:hover,
a:focus {
color: #e60000;
}
#media only screen and (min-width: 768px) {
header {
padding: 0 15px;
}
}
.header {
padding: 0px 0px 15px;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 60.875em;
}
.header:before,
.header:after {
content: " ";
display: table;
}
.header:after {
clear: both;
}
.header>.nav-a {
display: none;
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
margin: auto;
width: 100%;
float: left;
}
.header>.nav-b {
display: none;
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
margin: auto;
width: 100%;
float: right;
}
#media (min-width: 768px){
.header>.nav-a {
display: block;
position: relative;
padding-left: 0;
padding-right: 0;
margin: auto;
width: 50%;
right: auto;
left: auto;
float: left;
}
.header>.nav-b{
display: block;
position: relative;
padding-left: 0;
padding-right: 0;
margin: auto;
width: 50%;
right: auto;
left: auto;
float: right;
}
}
.menu {
display: block;
padding: 0;
*zoom: 1;
margin-top: 15px;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
}
.menu:before,
.menu:after {
content: " ";
display: table;
}
.menu:after {
clear: both;
}
.menu>li {
display: inline;
height: auto;
float: left;
padding: 0 0.625em 1.25em;
}
.menu>li {
width: 33.33333%;
padding: 0 0.625em 1.25em;
}
.menu>li:nth-of-type(n) {
clear: none;
}
.menu>li:nth-of-type(3n+1) {
clear: both;
}
#media only screen and (min-width: 768px) {
.menu {
margin-top: 30px;
}
}
#media only screen and (min-width: 1024px) {
.menu {
margin-top: 30px;
}
}
#media only screen and (min-width: 1230px) {
.menu {
margin-top: 30px;
}
}
.menu>li {
padding-bottom: 0;
}
.menu>li>a {
font-family: "Tungsten A", "Tungsten B";
font-weight: 400;
font-style: normal;
font-size: 24px;
text-align: center;
padding: 0 15px;
display: inline-block;
color: #525252;
border: 3px solid #f3f3f3;
text-transform: uppercase;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#media only screen and (min-width: 768px) {
.menu>li>a {
font-size: 20px;
}
}
#media only screen and (min-width: 1024px) {
.menu>li>a {
font-size: 28px;
}
}
#media only screen and (min-width: 1230px) {
.menu>li>a {
font-size: 30px;
}
}
.menu>li>a.active {
color: #111;
}
.menu>li>a:hover {
border: 3px solid rgb(0, 0, 0);
color: #181818;
}
.drop-down-items {
display: none;
}
.menu .menu-item-2667:hover .drop-down .drop-down-items{
display: inline-block;
padding: 0;
width: auto;
left: 0;
}
.drop-down-items a {
font-family: "Tungsten A", "Tungsten B";
font-weight: 400;
font-style: normal;
font-size: 14px;
text-align: center;
display: inline-block;
color: #525252;
border: 3px solid #f3f3f3;
text-transform: uppercase;
margin-left: auto;
margin-right: auto;
width: auto;
margin: 0px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.menu>li>ul>li>a:hover {
color: #181818;
}

Answer 1

It is because of the padding-inline-start in your css style, you can remove the style or add an inline style to the dropdown menu like below
<ul class="drop-down" style="padding-inline-start: 0;">
<li class="drop-down-items">Alaska Trip</li>
<li class="drop-down-items">Chile Trip</li>
<li class="drop-down-items">Argentina Trip</li>
</ul>