Alignment of Site Title on Burger Menu on Desktop Squarespace 7.1

Site URL: https://fourleafcloverproject.squarespace.com/

https://fourleafcloverproject.squarespace.com/
Password: fourleafclover

SOS! My client request a burger menu for the navigation in the form of the brand icon on the left, Site Title in the Center, and the CTA button on the right.

I've got this format setup, however the Site Title is off center. 

How do I fix this?

Here's the code I'm currently using:

//CUSTOM DESKTOP NAV MENU//
.header-nav {
  display: none;
}

.header-burger {
    display: flex !important;
}

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

//BURGER ORDER//
@media screen and (min-width:992px) {
.header-title-nav-wrapper {
  align: center !important;
    order: 2;
}
.header .header-burger {
    order: 1;
}
.header-actions.header-actions--right {
    order: 3;
}
}

// CUSTOM HAMBURGER//
/* Non-active burger */
.burger-inner:after {
    content: "";
    background-image: url(https://static1.squarespace.com/static/66b0f13e45cb493d90506dfa/t/6706cde7b4e6ae3aa33b3e98/1728499175846/FLCP-burger.png);
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: left;
    background-color: transparent !important;
    display: block;
    width: 100px;
    height: 60px;
}
.burger-inner>div {
    display: none !important;
}
/* Burger when active */
body.header--menu-open .burger-inner:after {
    background-image: url(https://static1.squarespace.com/static/66b0f13e45cb493d90506dfa/t/6706cde7b4e6ae3aa33b3e98/1728499175846/FLCP-burger.png) !important;
}
.burger-box {
  width:100px;
}

Try adding this additional CSS to even up the header.

// header alignment
.header-burger {
    width: 20% !important;
    justify-content: flex-start;
}
.header-layout-branding-center .header-actions {
    width: 20% !important;
}
.header-title-nav-wrapper {
    flex: 1 0 60% !important;
}

Let me know how that works for you!