Navigation items flicker from left to right/aren't centered only on Safari

I'm using the following code to split my 6 navigation items to have 3 on either side of a centered and inline logo. It looks good on Chrome desktop, but on Safari desktop the 6 items flicker/jump randomly as a group from side to side and aren't quite centered. 

My site is live and public at carabuenatequila.com, and you can navigate to any page to see it happen (I also attached a screen recording).

@media only screen and (min-width: 1030px){ 
.header-nav {
 position: absolute;
 margin-top:0!important;
 top: 2rem; 
}
}

.header-nav-item:nth-of-type(3) {
 margin-right: 30vw!important; 
}
 

.header-nav {
 position: absolute;
 margin-top:0!important;
 top: 2rem;
 z-index:1!important;
} 
 

safari video.mov

You try this approach instead

@tuanphan That partially worked -- see attached.

Issues:

+ How can I bring in both sides closer to logo? Everything I adjusted just moved the right side's spacing.
+ Font size on right isn't matching left - I do have code to have a custom font size as follows:

.header-nav *, nav.header-menu-nav-list * {
    font-family: 'MARK PRO';
  font-size: 18px
}

Thanks!

9 hours ago, sekxb6 said:

@tuanphan That partially worked -- see attached.

Issues:

+ How can I bring in both sides closer to logo? Everything I adjusted just moved the right side's spacing.
+ Font size on right isn't matching left - I do have code to have a custom font size as follows:

 

.header-nav *, nav.header-menu-nav-list * {
    font-family: 'MARK PRO';
  font-size: 18px
}

 

Thanks!

#1. Closer logo

Can you share site url?

#2. With size, use this CSS code to set size on right side

.header-display-desktop .header-actions.header-actions--right * {
	font-size: 18px !important;
}

@tuanphanSite URL is carabuenatequila.com

you can adjust 30 in this code to make both menu closer logo