Menu Items not spaced properly, custom css

www.lizdornian.com

Does anyone know the custom css to fix these menu items so they're spaced evenly on either side of the logo?

Since you're using code to create this split-navigation header style how you adjust it depends on the setup you have, and honestly it's going to be tricky to get it right. There are better and worse solutions for creating this look, what plugin/code did you use?

I used Squarestylist's tutorial here: https://www.squarestylist.com/blog/secondary-navigation

I got the spacing figured out, but now when it looks fine on home page, but when you click any subpage, two of the menu items disappear.

Footer code injection:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<script type="text/javascript">
   $(function() {
   $(".header-display-desktop .header-nav-item:nth-child(n+3)") .prependTo (".header-actions--right");
});
</script>

CSS:

.header-actions .header-nav-item {
  padding-right:2.1vw !important; /**change as needed**/

}

.header-nav-list   {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:end !important;
      -ms-flex-pack:end !important;
          justify-content:flex-end !important;
  .header-nav-item {
     padding-right:2.1vw !important; /**change as needed**/
  }
}

.header-actions--right {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:justify;
      -ms-flex-pack:justify;
          justify-content:space-between;
}

.header-actions .header-nav-item {
  padding-right:2.1vw !important;//change as needed

}

.header-nav-list   {
  display:flex;
  justify-content:flex-end !important;
  .header-nav-item {
     padding-right:2.1vw !important; //change as needed
  }
}

.header-actions--right {
  display:flex;
  justify-content:space-between;
}

.header-display-mobile .header-nav-item.header-nav-item--collection {
display:none;
}

thank you thank you!!!