Zakra mobile responsive logo issue

Hi,
I’m having trouble first with centering the logo on mobile and also the positioning of the hamburger icon.

I want to put the hamburger icon to the left of the logo and smaller and put the logo centered and still 100% size. I’ve tried this so far and had nothing:

@media screen and (max-width: 700px){
.custom-logo {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 90%;
}
.tg-icon {
display: inline-block;
width: 50%;
}
#wp-custom-header {
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}

It may be as simple as having picked the wrong classes to customise but I just used the default classes set up by Zakra and there are many.
Thanks for help

The page I need help with: [log in to see the link]