Centering logo on mobile site while hiding Hamburger menu

Hi there! 

I am having issues with my mobile logo remaining centered once I remove the hamburger icon from my mobile site. It is centering the logo as if the hamburger was still there. 

This is what I currently have in my CSS. Any ideas of how to fix this?

@media only screen and ( max-width: 1024px ) and ( pointer: coarse ), screen and ( max-width: 799px ) {

  .header-display-mobile .header-burger {
  
    display: none;
    
    }
  }
@media screen and (max-width:767px) {
.header-title-logo {
    text-align: center;
}
}

Hi. What is site url?

@tuanphan https://tetra-stingray-4cmw.squarespace.com

pw: freshstart

Thanks for taking a look! 

Hi, I would also like assistance with this issue!

On 1/10/2022 at 10:32 PM, freshstartmart said:

@tuanphan https://tetra-stingray-4cmw.squarespace.com

pw: freshstart

Thanks for taking a look! 

It looks like you figured it out?

13 hours ago, timnottage said:

Hi, I would also like assistance with this issue!

What is your site url?

@tuanphan it is only centered on certain mobile devices. The logo is still off center for a majority of them. This is a screenshot on my iphone 11.