Mobile menu open X jumps to the right instead of staying centered

Hello
I’ve added the code below to place the svg logo above and the burger below, but when I click on the burger to open it jumps to the right. I understand that it’s finding a top left registration point, so moving over by it’s own width, but I need the open icon to stay centered, please.

Also, I’d like to change the color and opacity of the black for the full page overlay menu, please. Thank you! :)

.responsive #top #wrap_all .main_menu {
position: relative;
}

/* adjust height */
.responsive #top #wrap_all #header {
height: 300px !important;
}

.responsive #top .logo {
width: 100% !important;
margin-top: 0px !important;
left: 0% !important;
}

.responsive #top .logo img {
/* margin-top: 60px !important; */
height: 300px !important;
width: auto !important;
max-height: 200px; /* this is key to making svgs larger */
margin: 0 auto;
}

/* closed menu */

.responsive #top .av-logo-container .avia-menu {
width: 100%;
text-align: center;
}

.responsive #top .av-logo-container #avia-menu {
margin: 0 auto;
width: 29px;
}

#top #wrap_all #header .av-small-burger-icon a {
height: auto !important;
line-height: 3 !important;
}

/* pancake */

.header_color .av-hamburger-inner,
.header_color .av-hamburger-inner::before,
.header_color .av-hamburger-inner::after {
background-color: #fff;
}

/* open menu */

#av-burger-menu-ul li {
text-align: center;
}

.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li a {
font-size: 12px;
line-height: 20px;
}

.html_av-overlay-full #top #av-burger-menu-ul .av-menu-button {
margin-top: 0px;
}