Mobile menu for desktop causing logo to be off centre

I am using the code below to use a mobile menu on desktop but it is causing my logo to not be centered. Is there a better way to do this?

Site: https://ocelot-harmonica-9zfb.squarespace.com/about

Password: password
 

.header-display-mobile .header-burger {
    order: 2 !important;
}

.burger-inner.header-menu-icon-doubleLineHamburger .top-bun {
    height: 1.5px !important;
    transform: translateY(-10px);
}

.burger-inner.header-menu-icon-doubleLineHamburger .patty {
    background-color: #ffffff !important;
    height: 1.5px !important;
    transform: unset !important;
}

.burger-inner.header-menu-icon-doubleLineHamburger .bottom-bun {
    transform: translateY(10px);
    height: 1.5px !important;
}

.header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-title {
    text-align: unset;
}

.header-burger {
    display: flex;
}

.header-nav {
    display: none !important;
}

.header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
}

@collgrimes there's a bunch of ways you could do this... I would probably suggest absolutely positioning the burger menu, but since you're already using flexbox, you can wrap the flexbox and then use a negative top margin on the burger instead. Here's that version:

.header-display-desktop {
	flex-wrap: wrap;
}
.header-title-nav-wrapper {
	flex-basis: 100%;
}
.header-burger {
	flex-basis: 100%;
	justify-content: flex-end;
	margin-top: -46px; /* or whatever the height of your logo is */
}

I thought that worked but it was still off a bit. I tried adding this but that didn't work either.

.header-title-logo {
    text-align: right;
}

This is the full code I am using but open to other ways of doing this.

.header-display-mobile .header-burger {
    order: 2 !important;
}

.burger-inner.header-menu-icon-doubleLineHamburger .top-bun {
    height: 1.5px !important;
    transform: translateY(-10px);
}

.burger-inner.header-menu-icon-doubleLineHamburger .patty {
    background-color: #ffffff !important;
    height: 1.5px !important;
    transform: unset !important;
}

.burger-inner.header-menu-icon-doubleLineHamburger .bottom-bun {
    transform: translateY(10px);
    height: 1.5px !important;
}

.header .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-title {
    text-align: unset;
}

.header-burger {
    display: flex;
}

.header-nav {
    display: none !important;
}

.header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
}

.header-title-logo {
    text-align: center;
}

@SaranyaDesigns I put it back and it looks like it works now but it seemed  off to me the about page before.

@collgrimes I think you should include the version I sent that starts with the media query... the negative top margin is messing with the mobile version... so wrap the whole thing in the media query like the above.