Center Logo with Hamburger Nav

Site URL: https://opera-stl.org/

We put in this code (below) to use the mobile hamburger nav on desktop, but it makes our logo in the header be off center. How can this be fixed?

@media screen and (max-width: 5000px) {
  .header .header-title-nav-wrapper .header-nav {
    display: none;
  } 
  .header .header-burger {
    position: absolute;
    display: flex;
    order: 1 !important;
  }
    
  .header--menu-open .header-menu {
    opacity: 1;
    visibility: visible;
  }
.burger-box div {
    display: none;
}
.burger-box {
    background-image: url(https://static1.squarespace.com/static/5f174588f138424ec2fbd0d7/t/5f1a2c0859f5c362ebe8be8f/1595550728438/Hamburger+Menu.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    }
}