@sdetweil thanks for the advice.

After some more trial and error it made me figure out I had to add these two to fix it.

.region.bottom.bar .container { margin-top: 0; } .region.bottom.bar .module { margin-top: 0; }

Guess it was the container one that I was missing and had to use together with the module definition to get it working.

So seem to have gotten a little further regards to the top bar.
Adding the position: absolute in body seems to have somewhat helped.
The overflow hidden actually made top.left and top.right disappear.

body { position: absolute; margin: 2; height: 100%; width: 99%; } .region.top.bar { height: 40px; float: left; }

My top.right module seems to be positioned a bit higher than my top.left module… But that might just be the look of the module itself.
Still need to figure out how to left align the navbar and what is happening with the background_below region…

Edit: Figured out the background as well after some research.
The fullscreen section is actually defined to be offset by -60px due to the body margins being defined as 60px. So had to simply add a similar section in my custom.css changing the offset to what I put in the body margin.

.region.fullscreen { position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; }