Mobile fullwidth logo with burger aligned center underneath

Hello
I’ve looked at tons of posts and have al ot of code but there are two things that are eluding me here, please (I’ve used basic colours to show what is being edited – they are just there as helpers for now).
1) the burger is not centered – it’s off to the right a bit – I’ve tried all sorts of css but can’t seem to get it exactly in the middle.
2) Once the burger is open, I’ve set the li to align top but I want it below the X

Here’s my working code, below. Thanks in advance!

	/* header logo and burger menu **********************************************/
	
	
	/* height of both logo and main menu area */
	
	.responsive #top #wrap_all .container {
	    height: 20px !important;
		background: green !important; /* just to see what elemnt is targetted */		
	}
	  
	.responsive #top .logo, 
	  .responsive #top .logo a {
  		width: 100% !important;
  	    height: auto !important;		
	    display: block !important;
	    margin: 0 auto !important;
		background: red !important; /* just to see what elemnt is targetted */
	  }

	  .responsive #top .logo img {
		padding: 20px !important;
	    margin: 0 auto !important;
	  }
	  
	  /* adjusts the burger within main menu area */
	  
	  .av-main-nav-wrap ul {
	  	top: 0px;
	  }

	  .responsive #top #wrap_all .main_menu {
	    position: static;
		height: auto !important;
	  }

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

	  .responsive #top .av-logo-container .avia-menu {
	    width: 100%;
	    text-align: center !important;
		background: blue !important; /* just to see what elemnt is targetted */
	  }

	  #top #wrap_all #header .av-small-burger-icon a {
	    height: auto !important;
	    line-height: 3 !important;
	  }	
	  
   	/* burger closed */
	
   	.header_color .av-hamburger-inner,
   	.header_color .av-hamburger-inner::before,
   	.header_color .av-hamburger-inner::after {
   		background-color: #fff !important;
   	}
  
      /* burger open */
	
  	#top .header_color .is-active .av-hamburger-inner, 
  	#top .header_color .is-active .av-hamburger-inner::before, 
  	#top .header_color .is-active .av-hamburger-inner::after {
  	    background-color: #fff !important;
  	}
	 
	 /* tweak the vertical position of the menu when open */
 
	 #av-burger-menu-ul {
		 vertical-align: top; /* originally middle */
		 background: black !important; /* just to see what elemnt is targetted */
	 }

	 #av-burger-menu-ul li {
	     text-align: center;
		 padding: 5px 0px !important;
	 }
  
	 .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li a {
	 	font-size: 12px;
	 	line-height: 16px;
	  	color: #afa89c !important;
	  }

	 .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li a:hover {
		color: #fff !important;
	  	opacity: 1 !important;
	  }		 
 
	 .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.current-menu-item .avia-menu-text {
	   color: #fff !important;
	 }