A few things to give you some ideas. When the screen is getting smaller, you have your CSS setup in a way that doesn’t allow the images or text to flex or wrap. For example, you have some items positioned as absolute so when the browser shrinks, you’re not allowing for these items to wrap or shrink since your telling the browser these items must be positioned where they are. Also, you have some margins set that are also forcing the browser to extend beyond the content. I would do the following, which isn’t a full solution, but will help you on your way:
- Set your .row to max-width of 100%.
- Your #title, .logo, and .headline-box are what is causing the overflow of the screen. Find a way to make this flex when needed. Either address this trough media queries like you have or adjust your CSS.
- Your footer margins are causing the overflow as well. Take away your left and right margins and either set the max width of the text to 70% or something like that in order to create the space your looking for. Make sure you also have a text-align: center; to center your text if you want.
This isn’t a full solution, but hopefully you have an idea of what you’ll need to do from here. Reply once you made the changes and I’d be happy to relook at it again if you’d like. Happy coding!