Your blocks are all positioned relative, but with set top and left positions. They are relative to the body so they don’t look at the other blocks, just act on the dimensions of the body. Maybe you can take a framework as an example, or use flexbox or css grids and see how it can be done.
See also for example what happens when you change position: relative; on your DIVs to position: static;.
To be able to have 2 DIVs next to each other you can use several solutions which will be easier in the end, than the solution you have chosen.
For example you can set display: inline-block; and give some width. That way DIVs will be next to each other.
You can try something with float: left; but keep in mind that floating needs to be stopped.
See an inline-block example here: https://codepen.io/anon/pen/GxNdym
I have also used a media query to have the DIVs on top of each other on smaller screens (768px and smaller)
