Centralise logo on mobile (with split navigation on desktop)

Hi there,

I used the following code to position my client's logo in the center of all navigation on desktop (split navigation). Works well, however on mobile the logo is positioned on the left. I've tried a few things but can't seem to move it to the center. Is anyone able to help?

Quote

 

// SPLIT NAVIGATION //

.header-nav {
    position: absolute;
    top: 55px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: 0px!important;
}

.header-nav-item:nth-of-type(4) {
    margin-right: 300px!important;
}

.header-title-logo a {
    z-index: 1000;
    position: relative;
}

.header-display-desktop .header-title {
    flex: 0 0 40% !important;
    z-index: 999999999;
}

 

site password: guardswell2023

Many thanks!

I didn't even think to look here 🤦🏼‍♀️ thanks so much!