Playing with the header elements position

If you're after centering the menu please use this CSS code at the end of the assets/css_main.scss.liquid file (screen record):

@media screen and (min-width: 1025px) {
  .site-nav.style--classic {
    width: 100% !important;
    text-align: center !important;
  }
  .site-header .site-nav-container {
    width: 100% !important;
    display: block !important;
  }
  .logo {
    z-index: 1 !important;
  }
}

To have the menu on the left and the logo image centered, please use:

@media screen and (min-width: 1025px) {
  .site-header {
    flex-direction: column;
  }
  .site-header .site-nav-container {
    width: 100% !important;
    display: block !important;    
  }
  .site-nav.style--classic {
    width: 100% !important;
    text-align: left !important;
    margin-top: -45px !important;
  }
  .logo {
    z-index: 1 !important;
  }
}