CSS for FIVE template NAVIGATION: Logo left aligned, navigation centred.

I want the logo to stay left aligned, the navigation to be centred, with just one navigation (book your stay) right aligned. I basically want the header to look like the ARTESIA template's header - see second attachment.

@Kina please share url & attachment

My logo and navigation is all together - left aligned at the moment. I would like to separate them.

This is what it looks like right now - https://five-demo.squarespace.com/

And this is what I want to achieve - https://artesia-demo.squarespace.com

My logo and navigation is all together - left aligned at the moment. I would like to separate them.

This is what it looks like right now - https://five-demo.squarespace.com/

And this is what I want to achieve - https://artesia-demo.squarespace.com

in style > option for that. you can set logo in left side and menu in center.

if not add this code in custom css box

body.banner-content-page-title-description.canvas-setting-full-width.top-navigation-alignment-left .horizontal-navigation-bar nav {
   padding-left: 283px;
   padding-right: 50px;
}

Thank you so much - it works but not exactly/precisely centred, it also doesnt stay centred when the browser window scales down.

Ive added the social icons to the right to balance it out with the logo.