Issue with my mobile site in preview mode vs live

Hi There, I’m having issues with the mobile part of my site. The header/hero sections and the “next project sections” on each of my project pages are not displaying properly. I’ve spent countless hours (not exaggerating - cant spend anymore time on it lol) perfecting these elements, and when I preview my website in mobile mode everything is perfect, but when I push it live, the headings, numbers (everything inside of the “project title wrapper” in the header & “next project head wrapper” in the next project sections moves to odd places. I’m not sure if there is a glitch in the system. But I need this working as its my portfolio and it needs to be optimized for mobile as I have potential employers looking at my site. Desperately need help trying to figure out whats going on. I’m not sure if its because I’m using absolute positioning but everything seems to look fine in the preview and then everything looks messed up live so it makes me think there’s a glitch happening? I had this running properly before I edited my site and switched the elements to absolute and the wrapper to relative. But it was the only way I could make sure each of the elements would stay centered in the frame. Before, the margins would cut off the text when the screen got smaller in width. Can you please help me figure out what’s happening? I’ve attached photos of one of the project pages, live and preview (whats its supposed to look like), but its happening for every single one of them. Some are worse than others. They all have the same if not similar formats. Really appreciate your help.

Here is my site read-only link -