Expansive navigation spacing

Site URL: https://www.freshcoastjazz.com/

Hello.

I had to reduce the link spacing of my main header links so I could set my mobile breakpoint to 1000px to mitigate the navigation from wrapping. Now the links look like they're too scrunched together with all this empty space between the links and logo when the browser is anything wider than 1200px. 

Is there any way to allow the link spacing to expand evenly as the browser width gets wider?

If you add this to your custom css from the main design menu, then I think this is the effect you want.

nav.Header-nav {
    width:80%;
}

.Header-nav-inner {
    display: flex;
    justify-content: space-between;
}

• sets the allowable width of each side navigation to 80% (so that your nav items don't bump right up to the logo). you could change this to other percentages. 
• changes the layout structure to flex, and justifies it to layout the space between each item evenly. This keeps the left and right extremes fully expanded to the 80% width. you could also try "space-evenly" or "space-around" for (slightly) different spacing settings, but I think this is probably the one you want. see here for documentation on this property: CSS justify-content property (w3schools.com)