That’s not fully possible without media queries although we can get quite close with some tweaks. You can lose the 41 rem width on the menu and use a max-width instead but you will need to use flex to make it expand.
Add the following rules after your original css as these are extra css rules that work with your existing rules. If all goes well then you can amalgamate them properly.
.header .topnav{flex:1 0 0%;}
.header .topnav ul {
padding:0 5px;
margin:1rem 0 1rem auto;
width:auto;
max-width:41rem;
min-width:300px;
}
.header h1 {margin:1rem auto;}
.logo {margin:auto;}
You are going to have to tweak padding rather than margins to get space around some of the elements.
I think that’s about as close as you can get on that top section without adding media queries.
Note how your images are squished in my screenshot. You need to add height:auto to the image css when you set their width to 100% and that will maintain the aspect ratio.
You can implement a position:sticky footer with the setup you already have like this.
footer{
position:-webkit-sticky;
position:sticky;
bottom:0;
background:rgba(0,0,0,0.5)
}
If you want an original sticky footer (footer sticks to the bottom of the viewport only when there is less content than viewport height) then you would need to do this instead:
body{
display:flex!important;
flex-direction:column;
min-height:100vh;
}
footer{margin-top:auto;}
CSS tricks has a recent article about this which should help.