How to make div elements not squish each other when changing screen size?

[percocet]

Here's my codepen

You must be registered for see links

When you minimize the screen and shrink the window size, the centertext overlaps the logo div. I don't want it to overlap, I want the position and space inbetween those two divs to stay the same. It looks messy when they overlap.

How can I achieve this?
Thanks

 

[CosmoPeak]

I'd be inclined to do something like this:

You must be registered for see links

Your code is /really/ messy, and you shouldn't use `position` like that. You can achieve similar results with floats/inline-blocks too, but flexbox makes things much easier if you can spend a few hours understanding them. Definitely don't use position like that. Look into the floats/inline-block display/flex.

 

[percocet]

I'd be inclined to do something like this:

You must be registered for see links

Your code is /really/ messy, and you shouldn't use `position` like that. You can achieve similar results with floats/inline-blocks too, but flexbox makes things much easier if you can spend a few hours understanding them. Definitely don't use position like that. Look into the floats/inline-block display/flex.

Thank you
I'll get back to reading on when to use position, and when to use floats/inline-block and flex.