Cheers. It does show the misalignment but I think that we’re not getting a real idea on the scaling issue due to the constraints of the layout being inside codepen which has its own met viewport tag. I’ll have to set up demos on standalone pages to test properly.
OK, that’s a shame.
That rule would have over-ridden the float behaviour of the faux columns so we can’t look at those as the cause of the problem.
Are you using the default browser on your phone? Do you know what it is?
Have you tried downloading an alternate browser to your phone just for comparison and to see if the same thing is happening?
Has the browser been zoomed in error (not even sure if that’s an option on mobile)?
You said your old phone was ok so what were you running on your old phone?
This is what your site looks like on an iphone 7.
Do you know anyone with a similar phone who can check if their version is working.
Sorry I’m running out of ideas here unless you want to send me your phone so I can test here 
As you haven’t optimised for mobile you may have to accept the fact that some people are going to get a broken site. These days I generally won’t visit a site where I have to keep pinching and zooming.
Here are a couple more things to try while I think of some more.
Add this CSS:
#links ul{list-style:none;margin:0 0 0 150px;padding:0;} body{background-size:3000px 1163px!important;}
I’m assuming your ‘body’ background images are all the same size but try the above anyway as that is the size on the first two pages you gave.
I’m wondering if its the fact that your images are being scaled in landscape which then mismatches them with content. (That’s also one of the things that we never do these days as you should never try and match up two different things together in a responsive layout (especially a background image to match other content).
Sorry for throwing all these things at you but if I could replicate the issue here I could do all this by myself in a few minutes