Control position and size of mobile navigation

Greetings.

I would like to be able to adjust the position and size of my header logo and hamburger nav on mobile. Specifically, it would be nice to place the logo in the upper left corner and hamburger in the upper right with the ability to control the padding on both.

I tried turning off the mobile header and adding the CSS below, as suggested in a different topic thread (https://generatepress.com/forums/topic/custom-content-to-the-mobileheader-area/?bbp_reply_to=372096&_wpnonce=dc491123cd#new-post). This gives me some control over the logo size, and places it in upper left corner, but the padding is too great. It also places the hamburger flush right, but it's not lined up with the logo.

Any additional code that would allow me to control these elements on mobile would be greatly appreciated.

Thank you.

Here's the code I referred to:

@media(max-width: 768px) {
#site-navigation {
clear: none;
background: transparent;
z-index: 500;
position: relative;
}

.site-branding {
display: block;
float: left !important;
}

.site-logo {
float: left !important;
clear: none !important;
max-width: 70%;
}

button.menu-toggle {
width: auto;
float: right;
}
}