Split Navigation overlapping on different browsers than Chrome

Hi! I've got a problem with split navigation on my site. I've added CSS to split it into the half with logo in the middle. I also adjusted the screen width so it doesn't overlap when the window is minimized.  It looks and works just as I wanted on Chrome but it is doing weird things in Firefox and Safari. How do I make sure it will look good in every browser? Screenshots with descriptions are attached below.

Code: 
@media screen and (min-width: 1100px){ 
.header-nav {
    position: absolute;
    top: 53px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: 50px!important;
}

.header-nav-item:nth-of-type(3) {
    margin-right: 400px!important;
}
  
  
.header-title-logo a {
    z-index: 1000;
    position: relative;
  }
}

You can see this same question with better code to create split navigation

Thank you, unfortunately, I have the basic plan, is there any way to do that without business plan and code injection? 

8 hours ago, motacilla said:

Thank you, unfortunately, I have the basic plan, is there any way to do that without business plan and code injection? 

What is your site url?

Hi @tuanphan - I posted about this same issue on another account I can no longer access. Can you help me find a way to separate the navigation with even spacing on both sides of the logo (right now is heavier on right side)

site is https://halibut-daffodil-g429.squarespace.com/ and password is 12345

15 hours ago, dlv118 said:

Hi @tuanphan - I posted about this same issue on another account I can no longer access. Can you help me find a way to separate the navigation with even spacing on both sides of the logo (right now is heavier on right side)

site is https://halibut-daffodil-g429.squarespace.com/ and password is 12345

Move left nav to left?

or

move right nav to left a bit?

12 hours ago, tuanphan said:

Move left nav to left?

or

move right nav to left a bit?

 

Move the right nav to the left (but not move the left nav)

On 9/25/2022 at 3:47 AM, dlv118 said:

Move the right nav to the left (but not move the left nav)

Find this code in Custom CSS & adjust number 150

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

@tuanphan So I found that the skewed issue of it not being centered was actually my logo file itseld - once I updated that, I now have the following issue at different screen sizes and would love help making this more consistent and not having to force mobile above 1000px: