How do I fix site's landing page that is pushed off-centre by a CSS animation? (Css/HTML/animation)

See more:

CSS

HTML

animation

I have a background animation that zooms in on the background (the "breathe" effect) but the problem is that when I refresh the page, the starting position for the page is off-set to the left by roughly how much the background has moved (in relation to the initial/correct position).

What I have tried:

I've tried and still have "overflow-x: hidden" in the CSS; it works but not completely. Building a wrapper/page around this page doesn't fix it either. I have a jsfiddle made, that can show the action of the background/the effect but not the problem; I don't know how to refresh the jsfiddle rather than re-run it fully. JSFiddle: https://jsfiddle.net/Isntlee/81y03nbz/19/

stackoverflow: https://stackoverflow.com/questions/59900722/background-animation-forces-landing-page-off-centre-on-refreshing-how-do-i-fix