Custom split header CSS not displaying correctly in Firefox browser

I've dug through other Firefox posts and can't seem to find a solution to this problem.

My website https://www.regencyhistory.net/ looks best with a central title and links either side, which I have used custom css to create. 

Code used: 

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

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

.header-title {
 z-index: 99!important;
 } 
}

However, this isn't working on Firefox. The gap between the links is too big and pushes link 4 onto a new line, warping the whole look.

I know how to write responsive code for different screen sizes but not different browsers. 

How do I target Firefox browsers to display differently?

Any help appreciated. Thanks 🙂

You can try this approach instead your CSS code