Centring Navigation Links with CSS Leaning Right

I've tried many bits of code to try and centre the navigation on this site: https://www.badcallbayretreat.com password: badcallbay

Any code that actually works is still making the navigation menu lean to the right, I'd like it to be centred. This is the code I'm using right now:

nav.header-nav-list {
    flex-wrap: nowrap;
}
.header-title {
    width: 10% !important;
    flex: 1 1 100% !important;
}

Can anyone help with this? Would be greatly appreciated!

Add this to Custom CSS:

.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    flex: 0 0 100%;
}

1 hour ago, Ziggy said:

Add this to Custom CSS:

.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    flex: 0 0 100%;
}

 

It's still leaning to the right

It doesn't look like you've added the code for me to check how it is behaving. When I adjust with the code I gave you this is the outcome:

I added and then returned to the original code I had since it was doing the same thing 

I've put the code back that you suggested and it's actually returned back to displaying over two lines rather than one 

21 hours ago, Ziggy said:

That only happens for me on smaller screen widths, it's not helped by the site margin set to 10vw which consistently squashes the content into the center 80% of the screen. you can alter this in Styles and Spacing.

Changed the site margin to 5px and this has solved it, thanks so much!

1 hour ago, HKins said:

Changed the site margin to 5px and this has solved it, thanks so much!

Brilliant!