Primary Navigation Drop-down Menu obscures the Secondary Navigation Menu

Site URL: https://broadwater.squarespace.com/

I have a drop-down folder in my primary navigation bar, entitled "More". The drop down options are cut off on the right side of my browser, so I added the following CSS code to keep it visible:

[href="/more"]+.Header-nav-folder {
    left: -420% !important;
}

The problem is, now that drop down for MORE obscures access to the secondary navigation menu below it. Do you know any solutions?

Remove your code, use this

span.Header-nav-item.Header-nav-item--folder:nth-child(7):hover .Header-nav-folder {
    left: -420% !important
}

You are a genius! Thank you for saving me!!!

I see mobile banner image on homepage is not fullsize. You can add this to Design > Custom CSS

/* Mobile home banner fullsize */
@media screen and (max-width:640px) {
section#welcome-photo img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section#welcome-photo {
    min-height: unset !important;
    height: 230px;
}
}

Thank you for this as well.

The code you provided for the drop down menu works in not obscuring the secondary navigation. However, now I have the original problem of the main menu drop down being cut off on the right side again  (More/Boarding/Tuition...). Do you have any ideas for that?