Responsive Webpage using CSS Flexboxes

I'm fairly new to turning mockups to html/css. Also, quite new to flexboxes. So a lot of things felt like hit and miss.

Is there a simpler way I could have done this? Do I really need to use so much divs to make everything in their proper places?

What's the best practice on how the CSS is arranged? Is there a best practice besides putting the important ones below? (Since it's cascading)

I was trying to make it responsive without using a media query (since flexboxes are, well, flexible) but I can't seem to do it because the navigation box is not the same width as the main box (On the desktop site). Is there a way to do so?

Any constructive feedback would be really appreciated!