I've been tasked with creating a fully responsive website, but I'm encountering difficulties with the mobile design. Specifically, when I switch to mobile dimensions like an iPhone 12, the header and footer don't line up properly with the main content. The main menu overflows past the main body, obscuring the hamburger menu bar and making it accessible only by scrolling right. Additionally, the footer isn't aligning correctly with the main content, and there's excessive white space on the right side of the mobile site. I've attempted to reduce text in the footer without success, and I'm at a loss for what to do next. I'd prefer not to rebuild the entire site.
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
font-weight: <900>;
font-style: normal;
}
nav {
background-color: hsl(220deg 100% 80%);
box-shadow: hsl(220deg 60% 50%);
color: #ffffff;
text-decoration: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 10%;
border-bottom: 1px solid #000;
transition: all 0.2s ease-in-out;
z-index: 100;
}
... (CSS code continues)
</body>
</html>