It’s really up to you and what you feel is important. You don’t really have to do anything in order, even the projects (I’ve finished everything but haven’t started on my personal website). There’s no real correct way to go about it since everyone thinks differently. You can always go back to an old project - you probably will since you’ll learn so much while doing the other projects you’re bound to find something you can improve on in your old projects. Besides, you can never learn TOO much. Everything comes full circle eventually.
BUT if this particular issue is really something that bugs you, it isn’t hard to fix. There are multiple solutions depending on your preference.
You can use bootstrap so that certain elements show up depending on the size of the page. Just google “bootstrap hidden”. So for your header, you can say that it only shows up when the screen is medium sized. Meanwhile, you can have another element (most people use a ‘hamburger menu’) that only shows up when the screen is small.
For pure CSS you can figure something out by replacing px as a unit and instead opting to use %, vh, vw, em, or even a combination of them using calc() - which runs math for CSS values.
It would be something like,
//Do whatever you want to do here. For example, check if height is bigger than width, then toggle a class when it is.
This allows for more customization and precision, in my opinion.