Custom header issues with mobile responsiveness in Crio WordPress theme

Hi,

We’ve been making progress on website update (snowcamping.org) – but I’ve come across some spacing weirdness in the header that I can’t seem to figure out. Hoping you might have some input!

We are using a custom header layout. Ideally, we would like to have the menu bar be a single line for as long as possible – something that looks like this:
(image 1 in the folder https://www.dropbox.com/sh/4afq3puz6eadzrw/AADmXO2OwCiYQ3n5HWppHm-8a?dl=0 )
In this view, there is still additional white space on the left (e.g., left of snowcamping.org, about use, Mission, etc), and similarly on the right.

When the browser is sized down a bit more, and the menu bar gets split into two rows, that white space margin actually *increases* (which is the opposite of what we would want, we’d like LESS white space on a smaller display, to make use of what screen space we have).
(image 2 in the folder https://www.dropbox.com/sh/4afq3puz6eadzrw/AADmXO2OwCiYQ3n5HWppHm-8a?dl=0 )

Is there any way to fix snowcamping.org (and the left margin in general) some fixed distance from the left border of the window, instead of have it kind of randomly move based on where the left border of snowcamping.org is? I assume this has something to do with the columns/column widths, but I can’t figure out where to adjust for that.

We have a slightly similar issue for the mobile header, with the hamburger. There, it seems like there are again two columns, and there is padding to the left of snowcamping.org but the right jams right up against the menu items in the hamburger when it is expanded:
(image 3 in the folder https://www.dropbox.com/sh/4afq3puz6eadzrw/AADmXO2OwCiYQ3n5HWppHm-8a?dl=0 )

Is there some way to have the menu items be either right or center justified instead of left justified? Or in the worst case, either shift snowcamping.org left a bit or the menu items right a bit, so that they don’t run together?

Thanks for any tips!
Mark