HTML & CSS CSS last menu item float left

[aman]

can someone advise how to move the sub-menu drop menu to left,

.header .menu > .menu-item {
    position: relative;
    display: inline-block;
    margin: 0 .75rem
}
.header .menu > .menu-item > a {
    display: block;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: inherit;
    padding: 1rem 0;
    border: none;
    outline: none;
    color: var(--color-black);
    text-transform: capitalize;
    -webkit-transition: all .35s ease;
    transition: all .35s ease
}
.header .menu > .menu-item > a .expand {
    position: relative;
    display: inline-block;
    width: .75rem;
    height: .75rem;
    margin-left: .35rem;
    pointer-events: none;
    border: none;
    outline: none
}
.header .menu > .menu-item > a .expand:before, .header .menu > .menu-item > a .expand:after {
    position: absolute;
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
    content: "";
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--color-black);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all .35s ease;
    transition: all .35s ease
}
.header .menu > .menu-item:hover > a {
    color: var(--color-pink-700)
}
.header .menu > .menu-item:hover > a .expand::before, .header .menu > .menu-item:hover > a .expand::after {
    background: var(--color-pink-700)
}
.header .menu > .menu-item > a .expand::after {
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
    transform: translate(-50%, -50%) rotate(-90deg)
}
.header .menu > .menu-item > .sub-menu > .menu-item > a:hover {
    color: var(--color-pink-700)
}
.header .menu > .menu-item > .sub-menu {
    position: absolute;
    top: 100%;
    left: -1rem;
    width: 13rem;
    height: auto;
    padding: .75rem 0;
    border: none;
    outline: none;
    opacity: 0;
    visibility: hidden;
    border-top: 3px solid var(--color-pink-600);
    background: var(--color-white);
    -webkit-box-shadow: var(--shadow-medium);
    box-shadow: var(--shadow-medium);
    -webkit-transform: translateY(1rem);
    transform: translateY(1rem);
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
        

}




.header .menu > .menu-item > .sub-menu > .menu-item {
    display: block
}
.header .menu > .menu-item > .sub-menu > .menu-item > a {
    display: block;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: inherit;
    padding: .5rem 1.25rem;
    color: var(--color-black);
    text-transform: capitalize;
    -webkit-transition: all .35s ease;
    transition: all .35s ease
}

      <nav class="navbar" id="navbar">
        <ul class="menu">
          <li class="menu-item"><a href="#">Home</a></li>
        

         <li class="menu-item menu-item-child"> <a href="#" data-toggle="sub-menu">Flights<i class="expand"></i></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="#">Web Design</a></li>
              <li class="menu-item"><a href="#">Web Development</a></li>
              <li class="menu-item"><a href="#">Brand Marketing</a></li>
              <li class="menu-item"><a href="#">SEO and Optimizing</a></li>
            </ul>
            </li>
             <li class="menu-item"><a href="#">Business Class</a></li>
          <li class="menu-item menu-item-child"> <a href="#" data-toggle="sub-menu">Destinations<i class="expand"></i></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="#">Basic</a></li>
              <li class="menu-item"><a href="#">Standard</a></li>
              <li class="menu-item"><a href="#">Premium</a></li>
              <li class="menu-item"><a href="#">Professional</a></li>
            </ul>
          </li>
          <li class="menu-item menu-item-child"> <a href="#" data-toggle="sub-menu">More<i class="expand"></i></a>
            <ul class="sub-menu">
              <li class="menu-item"><a href="#">Design Project</a></li>
              <li class="menu-item"><a href="#">Development Project</a></li>
              <li class="menu-item"><a href="#">Branding Project</a></li>
              <li class="menu-item"><a href="#">Others Project</a></li>
            </ul>
          </li>
        </ul>
      </nav>

 

[OldMan]

I copied your HTML to see if it's coded correctly and it is good. Then, added the CSS to look at your styling. and nothing happened. Something is missing somewhere.
When I see a line like:
color: var(--color-pink-700)
I am sure of it.