Desktop Nav - Logo is off center after forcing hamburger nav on destop.

Hi,

I've tried my best from other posts, forums etc but only just learning css. I've managed to get the burger nav to show on desktop, but in the process the logo has gone off center. I found another forum with this issue but couldn't seem to make the solution work for me, so thought I needed to also ask if anyone can help! 

I know there must be something in my css that is causing it as the site styling for the nav layout is logo centered but I just can't seem to see it from looking through it. website is www.cocoon-hgt.com and site is live so no password needed. 

The css code i have in the editor for everything is currently this below, if helpful. Thanks in advance if anyone can help - in my head it should be simple but in reality it's like learning a new language and i'm struggling 🤣

Thanks

Ben

header a {
  background-image: none !important;
}

/*Hide Mobile Folder Arrow*/
.chevron { border-color:transparent; transform:rotate(0deg)!important; margin-top:-1.25rem!important} 

/*TO MAKE FOLDER TITLES CLICKABLE IN SQUARESPACE ON DESKTOP AND MOBILE (7.1)*/
#header .header-menu-nav-folder--open {
  transform: none !important;
}
#header .header-menu-nav-folder--active:not([data-folder="root"]) {
  transform: translateX(100%);
}
#header .chevron.chevron--right {
  display: none;
}

@media screen and (min-width:992px) {
.header--menu-open .header-menu {
    bottom: unset;
    left: 0px;
    right: 0px;
    top: 0px;
  /* can add height: 10%; etc */
}
.header-menu-nav-folder.header-menu-nav-folder--active {
    overflow: hidden;
}
.header-menu-nav-folder-content a {
    margin-top: 10px;
    margin-bottom: 10px;
}
}

/*TO MAKE MOBILE NAV SHOW ON DESKTOP*/

.header-nav, .header-nav-list {

  display: none;

}

.header-burger {

  display: flex;
  order: -1

}

.header--menu-open .header-menu {

visibility: visible;

  opacity: 1;

}

It looks like you figured it out?