Menu Toggle appearing over the logo at center in mobile-view

I used this code as suggested by one of the support staff here. It worked totally fine but now the menu toggle at mobile view has shifted to the middle over the logo. Could you please help me with this?

The Site link: https://lessonery.com/

The Issue Image: https://imgur.com/a/u0eji14

@media(max-width: 768px) {
    .site-logo {
        position: absolute;
        left: 50%;
        top: 15px;
        transform: translateX(-50%);
        z-index: 1000;
    }
    .has-inline-mobile-toggle .mobile-menu-control-wrapper {
        flex-direction: row-reverse;
        flex: 1;
    }
    button.menu-toggle {
        flex-grow: 0;
        margin-right: auto;
    }
}