Logo not aligning in mobile view

I used custom CSS to align our website's logo better but it seems to directly impact the mobile view spacing.  It looks perfect in desktop view but when switched, the logo goes almost entirely to the right.  If there is a way to fix this I would love to hear solutions!  I've pasted the CSS that I'm using below:

.header-title {
    position: absolute;
    left: 37.5%;
    top: %;
    transform: translate(-50%,-50%);
    z-index: 9999;
    text-align: center;
}
.burger-inner {
    display: none !important;

I also used a bit of code to structure the drop-down menu which you can see at the bottom.  Hoping that this can be fixed without messing that up.  Thanks for any and all replies! 

If you share site url, we can check problem easier.

9 hours ago, tuanphan said:

If you share site url, we can check problem easier.

https://tangerine-piccolo-86r4.squarespace.com/splash-page   Lmk if that works.  The site isn't published yet so I'm not sure if that will.  Im pretty eager to get this sorted out since a client needs this draft later today.

14 hours ago, jhlady said:

https://tangerine-piccolo-86r4.squarespace.com/splash-page   Lmk if that works.  The site isn't published yet so I'm not sure if that will.  Im pretty eager to get this sorted out since a client needs this draft later today.

The site is private. You can follow this to share url.

On 6/1/2024 at 12:59 AM, tuanphan said:

The site is private. You can follow this to share url.

password is momento . let me know if that works.  thanks so much!

Use this code to Custom CSS box

body.header--menu-open .header-layout-branding-center .header-title {
    flex: 1 1 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}