Unordered list refuses to center on iphone mobile but looks fine in dev console simulated iphone

So im working on a wordpress theme. Ive tried everything. My meta information is in my header: <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, shrink-to-fit=no">

Ive tried removing the padding, adding padding, removing margins, text align, flexbox, literally everything. For some reason on this Helvetica BQ font it adds some extra padding to the left ONLY for my iphone but not for desktop or the simulated iphone in dev tools on chrome.

I am wondering if anyone else has ran into the issue. The CSS file is 1000 lines and ive looked at conflicting rules in dev console and layout. Ive tried to design in a way where I reuse most rules but for some reason:

On simulated iphone and desktop = perfectly centered. Actual iphone = slight off center padding left?

The rules for the css container are as follows:

.main-primary-menu-container { padding-left: 0 !important; font: bold 1.1em/1.5 "Helvetica", Helvetica, Arial, sans-serif; text-transform: uppercase; text-align: center; margin-bottom: 3px; word-spacing: 10px; line-height: 18px; }

Ive tried commenting out the enqueue styles for bootstrap and normalize and looking at any style that might be conflicting but no cigar. I feel this is an issue with how safari on iphone renders webpages with its current update. Has anyone had the same experience?