Centering mobile nav hamburger/close buttons using custom CSS

Hi there,

As the post title says, I would love some help centering the mobile nav hamburger/close buttons using custom CSS.

I've already found and implemented the code below which works perfectly in the squarespace/desktop environment (when adjusting browser window to be mobile size) but once viewed on an actual mobile device, it's not quite centered – at a guess, I'd say it's off (to the right) by 3-5% [see mobile screen grabs attached].

Note: I only have an iPhone, so can only test Chrome and Safari on that – it might just be iPhone specific?

I any case, it would be awesome if someone out there had an answer for this.

Site pass is: Gameon85

Thanks

/*Center Mobile Hamburger*/
@media only screen and (max-width: 786px) {
   .header-display-mobile {
      display: block !important;
    }
}
.header-display-mobile .header-display-mobile,
.header-display-mobile .header-burger {
  display: block !important;
  margin: 0 auto !important;
}
.header-display-mobile .header-mobile-logo {
  text-align: center !important;
}

It looks nicely centred to me but more importantly you may need to adjust the G A M E as it covers the navigation and makes it unclickable on smaller screens:

Thank you for the reply @Ziggy, I apreciate you taking the time to look at my question.

May I ask what mobile OS and browser you are on? (you're definitely not looking at the 'mobile version' of the site on a desktop right? Because it doesn't show the error when previewing mobile on a desktop.)

Strange that the G A M E images are so large though and thank you for pointing this out to me! I've added them using the below code and as you'll see, they are set to scale to 15% height of window... so unless you have a 30cm tall phone 😅🤔, this shouldn't be happening? Or am I missing something here?

I'd be interested in hearing if anyone else can see the not-quite-centered hamburger as I do... and even more so, if someone has a solution! 

🙏🙏🙏

<img src="https://images.squarespace-cdn.com/content/6651283fe26f292de1083d55/be4f900f-e84f-4b8b-bae4-247b82f8905e/G.png" height="15%" class="tp-sticky-img-g"/>
<style>
  img.tp-sticky-img-g {
  	position: fixed;
    top: 3vw;
    left: 3vw;
    z-index: 900;
  }
</style>

I was previewing and stress testing to see what happened on a narrow screen. To fix it you could put a max width of 40vw to limit the width on edge cases (such as the outside screen of the galaxy fold which is pretty skinny).

To correctly position the burger you need the position relative to the left to be 50% minus half the burger container width (which is 50px):

    left: calc(50% - 25px);

Thanks for taking the time to clarify @Ziggy. 🙏