First delete this CSS:
.main-navigation .inside-navigation {
position: static;
}
.main-navigation .menu-toggle {
position: absolute;
top: 20px;
left: 10px;
z-index: 1000;
}
@media(max-width: 500px) {
.site-header .site-branding-container .site-logo {
margin-right: 10px !important;
}
.site-header .site-branding-container .site-logo img {
max-width: 40px;
}
.site-header .site-branding-container .main-title {
font-size: 13px;
}
.main-navigation .menu-toggle {
top: 5px !important;
}
}
then add this CSS to center the mobile logo:
.mobile-header-navigation .site-logo {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
}