CSS parallax perspective scrolling

I've been playing around with doing a Firewatch inspired CSS parallax page with some old background art I did.

http://codepen.io/countduckula/pen/jrPNgd

Only I'm running into problems mostly caused by me not using CSS since the last century.

1. In Chrome, Safari but not Firefox the page keeps scrolling past the end of parallax__cover and you can see the animation layers underbits... very embarrassing.

2. In all browsers elements placed further away are being shifted slightly in the x-axis, (Zoom out on the page to see alignment edges) I've noticed this in other peoples parallax examples as well.
   I've attempted to fudge this by eyeballing the positioning on each layer eg: left: -0.45%;
   Could this be caused by the illustrations being a weird size? Or maybe some weird decimalisation percentage?

basic CSS questions

1. I understand that by using absolute positioning
   .parallax {height: 100vh; overflow-y: auto;}
   I can get rid of the dreaded double scrollbars, but absolutely positioning everything back into the page feels like I'm doing something very wrong (see header/parallax__cover). Should I be applying the effect to the body tag, then putting everything in that?

2. The margins are up to something very odd.
   For example: If I use normalize.css but don't set
   * {margin: 0; padding: 0;}
   there ends up being a gap between parallax__cover and the bottom of the viewport.
   Also paragraphs have a bottom margin that's extending beyond their containing div.
   
   Is this why-vertical-margins-collapse or do I need to get reading on box-sizing: border-box?

Any help here at all is much appreciated.