Centered logo with split navigation in header (Dawn Theme)

[thanksforhostin]

I'm trying to split my navigation links so that there are 2 on either side of the centered logo. I found a related tutorial and while it did work to split the navigation, the first 2 links are too far to the left and overlapping with the search icon (for most screen widths). I want the 2 links to be equal distance from the logo on each side that also adjust with screen width.

This is the custom css I added as instructed by the tutorial:

1. Themes > More Options > Edit Code

2. Assets > add a new asset > create a blank file > create a custom.css

3. In theme.liquid find (Ctrl+F): {{ 'base.css' | asset_url | stylesheet_tag }}

4. Paste underneath the base.css line: <link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">

5. Open custom.css in Assets and paste the following:

.header__inline-menu {
position: absolute;
top: 25%; /* Adjust's verticle position */
pointer-events: none; /* Disables Menu */
}

/* Chooses which menu item to target */
.list-menu--inline li:nth-child(#) { /* Change '#' to the position (number) of the menu item to add the margin after */
margin-right: 175px; /* Adds a margin to break the menu in half */
}

/* Activates Menu Buttons */
.header__menu-item {
pointer-events: auto;
}

Can anyone help me adjust the spacing of the links? Thanks so much!

Screenshot for reference:

[AnneLuo]

Hi, @thanksforhostin 

Can you please share the store URL so that I can assist you?

[thanksforhostin]

Hi Anne - thank you!

site: 4krvmd-zc.myshopify.com
password: reblia

[AnneLuo]

I have checked your store. I can help you with it. But it needs to add some custom code. If you need my help, please let me know.

[thanksforhostin]

I sent you an email, thank you.

[thanksforhostin]

Hi @AnneLuo  - just checking to see if you received my message or email. Still looking to solve this issue. Thank you.