Responsive layout mix of Grid and Flexbox

Hi BenChis, I'm not sure if I got your question, but were you looking for a way to make the mobile menu cover the entire screen? If so, I actually think you already answered your question :-) Try this on your ul:

    width: 100vw;
    height: 100vh;
    padding-top: 10%; (or whatever you prefer)

My other thoughts:

• For the header text, I would delete the span tag wrapping the word 'THAT'. Remove the margins and place the entire heading text inside the h1 and add a max-width so it would only stretch to a point.

• The first section under the header has duplicate img tags, one used for mobile and another for desktop. Look into <img srcset> so that you are only using one tag. Here's an article

• The social media icons need to be wrapped in an a tag since they usually lead the user to another page. There's also a huge shift when hovering on them. Use the same technique as you did on the top and footer navs with the pseudoelement ::after so that the underlines are positioned beforehand rather than adding padding to create space between them and the item hovered on.

• The entire page might also need a max-width since it is expanding a little too much on larger screen widths.

Hope this helps!