How to get a fixed layout? Content blocks are overlapping when browser is resized

Hello! I have built my site with 7.1 by adding lots of text and image content blocks.  However, when I resize my browser, the content blocks overlap each other. Images will cover text, and vice versa. It does not look good and makes things hard to see and read. How can I obtain a fixed layout?

Similarly, the assets on my header also crowd and overlap each other when the browser is resized. For example, the nav bar will overlap with the social media icons and my logo. It looks like a mess. 

Any help is appreciated- thank you!