My Navigation Bar Text overlaps the logo in Safari but is perfect in Chrome

You can see in one of the images below  the text overlaps the website logo. I've tried several things I've seen online and none have resolved the issue. 

The custom code I've used to play about with the spacing is:

/*Make split navigation*/
.header-nav {
    position: absolute;
    top: 5px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: px!important;
}

.header-nav-item:nth-of-type(4) {
    margin-right: 300px!important;
}

.header-title-logo a {
    z-index: 800;
    position: relative;
}

I'm unsure if I need to add additional code, remove the code I've got. But every computer I've checked this with on Safari has the same issue.
(I've done the latest Mac OS update and that hasn't changed anything, as well as clearing safari cache)

Split navigation is sadly not so easy to achieve robustly, every solution I've tried tends to run into these problems on certain screen sizes. Though I can't see exactly why Safari is constantly giving you a narrower header and causing these issues on all desktop views.

11 minutes ago, clocampbell said:

margin-left: px!important;

This line is missing a pixel value, so maybe causing a problem.

This additional CSS might help by reducing the left/right margin.

.header .header-announcement-bar-wrapper {
  margin-left:1vw;
  margin-right:1vw;
}

Let me know if that had any positive impact.

Hey, thank you for your suggestion!

Unfortunately amending the code to say '0' instead of 'px' and adding your additional code hasn't made a difference. 

If I remove all the code affecting the banner, there's no issues across either browser. However I'd ideally like the navigation text to be either side of the logo than below. 

Looking forward to your response, cheers.

You could try a different approach such as this:

https://www.squarestylist.com/blog/secondary-navigation