How to make navigation links in header centered and on one line below the Logo

Site URL: https://www.bridevibe.co.uk

Hi, 

I have a centered header with the logo in the middle navigation page links underneath and the social links/CTA button either side of the logo. But I don't like the fact that the navigation links stack in two lines when there appears to be plenty of room to put them all on one line under the logo. I've had a look around on the forum and tried some of the suggested code but nothing seems to work. Any ideas what can be done?

https://www.bridevibe.co.uk

Try adding to Design > Custom CSS

/* Nav one line */
.header-title-nav-wrapper {
    flex: 1 0 90%;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 1 1 100%;
}

Thanks for your reply, it's appreciated, however it doesn't seem to work on our site, I've tried this same code before from your suggestion on another post on the forum. I've no knowledge of CSS so I'm a bit stuck!