Tea Cozy - Review and fix

Hello guys, I’ve completed the project in half-day lets say, but run into unknown mistake. This is a complete page as it should look like by the design spec from codeacademy. It works fine in full view, but when go tablet or mobile view, the location section does not display properly. It scrolls through the fixed nav position, it’s not responsive correctly at the bottom only. If you could help me out and tell me whats wrong, i’d be very gratefull.
Also the top image should be position relative and top 70px, i think, then again it scrolls through the nav bar. I guess its z-index thing, which i dont understand properly to be honest.
Thank you in advance for any feedback and help.
link to githubpage: Tea Cozy Shop
link to repo: GitHub - dusanw/tea-cozy

Fixed the mission image by changing the css.

.our-mission {
    position: relative;
    margin: 0 25px;
    top: 70px;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 100%;
    height: 700px;
    background-image: url(./images/mission-background.jpg);
    background-size: cover;
}

and fixed location scroll problem as well

.location {
    position: relative;
    z-index: -2;
    margin: 40px 25px;
    background-image: url(./images/locations-background.webp);
    background-size: cover;
    height: 500px;
    max-width: 100%;
    text-align: center;
    opacity: 0.7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

now the responsive part of the location left to be complete, and seriously have no idea what is wrong there