Portfolio Site Responsiveness Help

Hi, I have a few questions , mostly regarding the responsiveness of my website. I am using a mobile-first approach.

  1. When viewed on a small screen, my About section overflows into my Project section. Why? If they’re in display:flex, then shouldn’t they be completely separated unless I manually override that?

  2. When viewed on a big screen, I want to move the nav from the bottom (currently in the html as the footer) to the top. However, this presents the problem of the nav now simply sitting on top of my current site, obscuring my other elements. Because I want the size of everything to scale, I can’t (and also don’t think it would be good practice?) simply keep testing different margin-top values until it sits just right. How should I best go about making the nav sit at the top in a media query without obscuring my page - is it possible to do without jQuery/JS?

  3. When I added the media query code to reposition the footer at the top when viewed on a big screen, all of the project links stopped working when viewed from that screen size and I have no idea why? All i changed was the value of top:0 for the footer. How could that change the links being clickable?

  4. Why is my nav not extending all the way across the page, yet there is also somehow space to horizontally scroll?

Here is my code: https://codepen.io/Lukedoc321/pen/RwPevGa?editors=1100

Thanks!