Responsiveness way off

In checking what "real life" responsiveness looks like for my theme, there is a big discrepancy on what Upfront editor thinks it should look like and what it really looks like on a small iPhone device.
Here is what Upfront sees at 315px wide (assuming there's a 315px breakpoint, but going by the grid)

Here is what my iphone sees in landscape mode:

And here is what Chrome Dev Tools sees at an iPhone perspective (almost dead on with the real iPhone, BTW) :

So, Upfront think all is hunky dory, but the iPhone and even Chrome see the page set to the left with differing issues happening with the header image as well.

I'm thinking I have some media tag adjustments to make, but I need help with the css.

I have tried a number of options including hiding the header region and all full width parallax regions that didn't have any other content, same results.
What is strange is that scrolling down causes the header navigation to pop out to full width while the other content stays to the left.

Q- What can I do to fix?
I cannot duplicate this on the Panino demo site, so it must be something I'm doing.

In trying to fix the responsive design and removing the header hero area that had the Logo, I thought that since I can hide regions and elements at certain breakpoints, that I could do this as well at full screen, this way I can have just a logo appear below the top nav in its own region, when viewed on a small device. So, a reverse hide at breakpoint. However, this appears to not be the case within the editor.

Q- Can I only hide full screen regions/elements from the tablet and phone breakpoints with the Upfront editor?
Q- Could I make my own media query css entries to make this work in reverse?

This is a local dev right now, so I cannot turn on access.