Alignment: How to shift Navigation Bar Items to center, left and right. And, aligning logo baselines

Help! 

I am trying to move some navigation bar items to the middle of the navigation bar, and keep one item aligned to the right. Currently my page has all navigation items left justified. See here:
I've been trying to input css code and nothing is working. I attached a screenshot of what I want the navigation bar to look like.

I also want to align the baseline of the logo with the baseline of the navigation links.

Thank you kindly,
2Eyeballs

Hi, thank you!

Yes, my link was incorrect. Here it is. 

And to confirm I am inputting css correctly: I am copy pasting your suggestion directly into custom css. Is this right?

11 minutes ago, 2Eyeballs said:

And to confirm I am inputting css correctly: I am copy pasting your suggestion directly into custom css. Is this right?

Correct. Sorry for not specifiying!

It didn't work. A lot of time when I input css code, it doesn't affect the design at all. I don't use very much css code. I've also checked the output in different browsers, and nothing changes...

Have you tried clearing your browser cache?

If you can give me access to your website temporarily I can try and get this to work for you.

I cleared my cache and then I saw that my margins have shrunk all around, which is good as it is another issue I have been trying to resolve.  I would be glad to give you access. How do I do that?

Oh! I tried your suggestion again and it is working now... You are an angel.

I have another question - what code might I use to make the footer ornamentation touch both ends of the browser window and keep the entire footer flush to the bottom?
 I'd also like to the hero image to touch both ends of the browser window.

7 minutes ago, 2Eyeballs said:

Oh! I tried your suggestion again and it is working now... You are an angel.

Brilliant!

9 minutes ago, 2Eyeballs said:

I have another question - what code might I use to make the footer ornamentation touch both ends of the browser window and keep the entire footer flush to the bottom?
 I'd also like to the hero image to touch both ends of the browser window.

Try this Custom CSS for the very bottom one:

@media only screen and (max-width:767px) {
  #block-yui_3_17_2_1_1692797721106_161964 {
    .sqs-block {
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
  }
}

It doesn't seem to be working....

Try this tweak:

@media only screen and (max-width:767px) {
  #block-yui_3_17_2_1_1692797721106_161964 {
     padding-left: 0px !important;
     padding-right: 0px !important;
  }
}

I also noticed that you have some scripts in the Footer Code Injection that is not correctly wrapped in <script> tags so it is rendering as plain text:

When I pasted your latest tweak (I pasted it in Custom CSS, below the successful nav bar coding suggested earlier) it broke the nav bar spacing.

Thank you for mentioning the incorrect wrapping. I didn't know why I was seeing that text. 😃

1 minute ago, 2Eyeballs said:

When I pasted your latest tweak (below the nav bar coding you suggested earlier) it broke the nav bar spacing.

Did you remove anything? That CSS shouldn't have any effect on the header.

I tried to put it in again, cleared cache, still not working, still breaks nav bar coding....

Here is all the code I currently have in Custom CSS - 
#collection-5f3c40ae55bbd105c88bb571
{
 header, footer{
  display: none!important;
 }
}

#topNav {
    vertical-align: bottom !important;
}

#topNav .main-nav ul li:first-child {
  margin-right:10vw;
}
#topNav .main-nav ul li:last-child {
  margin-left:10vw;
}
}
@media only screen and (max-width:767px) {
  #block-yui_3_17_2_1_1692797721106_161964 {
     padding-left: 0px !important;
     padding-right: 0px !important;
  }
}

In Code Injection, I have the following code: 

Header - 
<style> h1, h2, h3, h4 {-webkit-hyphens: manual !important;-moz-hyphens: manual !important;-ms-hyphens: manual !important; hyphens: manual !important;}
</style>

<style>
#headerWrapper{
  padding-top: 10px; /* Adjust the value as needed */
  padding-bottom: 0px; /* Adjust the value as needed */
}
</style>

Footer-
<script> { <footer{
   padding-left: 0px; 
   padding-right: 0px;
   padding-bottom: 0px;
   padding-top: 0px;
   max-width: 100% !important;
   margin-left: auto;
   margin-right: auto;
}
          </script>