Icons between Navigation links and resizing logo for large screens

Hello,

I have two questions I need help with.

Question #1
I have a split navigation on the portfolio site I'm working on and I put star icons between each navigation link. They aren't spaced out correctly, and I would like to have the stars reflected symmetrically on both sides. It's hard to explain but hopefully the attached image will show what I mean. I assume I would need to have separate codes for the left and right sides, but I'm not sure exactly where to place them or how to write them.

Here are the CSS codes I used for the split nav and the icons

SPLIT NAVIGATION

*/
@splitAfterItem: 2;
@actionSize: 50px; 
@logoSpacing: 1.5vw;

//Width at which nav will stack
@media screen and (min-width:116px) {
  
//Dynamic Nav font size
#header .header-nav-item {
  font-size: clamp(12px,calc(~".6vw + 5px"),15px);
}

//Split Structure
#header .header-layout-branding-center-nav-center .header-display-desktop .header-title-nav-wrapper {
  display: grid;
grid-template-columns:1fr auto 1fr;
  .header-nav,.header-title {
    grid-row-start: 1;
  }
  .header-nav { margin-top: 0; }
  .header-nav-item a {
    opacity: 0;
    transform: none!important;
    transition: opacity .3s linear;
  }
  &.has-nav .header-nav-item a{opacity:1!important;}
.header-title{grid-column-start:2;}
@splitOne: @splitAfterItem + 1;
.header-nav:first-child .header-nav-list > div:nth-child(n +@{splitOne}) {display: none;}
.header-nav:not(:first-child) .header-nav-list > div:nth-child(-n +@{splitAfterItem}){display:none;}
//Left side nav
.header-nav:first-child {
  display: block;
  text-align: right;
  margin-right: @logoSpacing;
  .header-nav-list {
    justify-content: flex-end;
  }
}
//Right side nav
.header-nav:not(:first-child) {
  text-align: left;
  margin-left: @logoSpacing;
.header-nav-list{justify-content:flex-start;}
}}}
//Give nav more width
#header .header-layout-branding-center-nav-center .header-display-desktop {
  .header-title-nav-wrapper {
    flex: 0 0 calc(~"100% - @{actionSize} * 2");
  } 
.header-actions{
  width:@actionSize;
  flex: 0 1 @actionSize;
  max-width: @actionSize;
  }
  //hide left side nav when stacked
.header-nav:first-child {
  display: none;
}
}
/*

STAR ICONS

.header-nav-item a:after {
  content: " ✦ ";
  margin-left: 10px;
  color: #C2BE58;
}

Question #2
How do I make the logo resize for a large monitor screen? I've been working on my 13" screen laptop at home, but when I look at my site on my 27" screen at work the logo stays the same size and looks too small. I tried to use the clamp code, but I don't understand how to write it. 

Sorry for such a long post 😬

Thank you @Vicks!