Full width nav with logo and CTA's

Hi,

I would like the desktop view of our website to show our logo, shopping cart and CTA whilst also displaying the navigation menu items on a singular row.

I had previously followed some posts regarding extending the navigation menu but the menu items still stack. Below are the current CSS and code injections in place. I'm not sure what I need to tweak or remove from the below.

Thanks in advance.


Custom CSS: 

.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-item {
    margin-left: 5vw !important;
    margin-right: 5vw !important;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    flex: 0 0 100% !important;
}

Code injection:

<style>
   @media(max-width:1024px) {
     .header .header-actions-action--cta {
       display: block !important;
        margin-right: 55px !important;
        margin-left: 14px !important;
     }
  }
  
  @media(max-width:400px) {   
     .header .header-actions-action--cta {
       display: block !important;
        margin-right: 15px !important;
        margin-left: 14px !important;
     }
  }

</style>

What is your site url?