Let's start fresh. My goal is to align these 4 anchor tag li's in the center of this ul.
Is there a way I can group these four items into a single container and then use CSS to position them to the left? I simply want these 4 elements to be visually centered within that ul.
Here's an image illustrating what I mean
Below is the complete header section in HTML. There's quite a bit of CSS, so I'm not sure what specifically to refer to, but I'll include my current code below for reference.
<!-- Header -->
<header class="header header-fixed header-fixed-on-mobile header-transparent" data-bkg-threshold="100">
<div class="header-inner">
<div class="row nav-bar">
<div class="column width-12 nav-bar-inner">
<div class="logo">
<div>
<a href="tel:1-530-680-8255" style="color:grey; display:inline-block">1-530-680-8255</a>
<a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block"></i>1-530-680-8255</a>
</div>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<li class="aux-navigation hide">
<a href="#" class="navigation-show side-nav-show nav-icon">
<span class="icon-menu"></span>
</a>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li class="current"><a href="index.html">Home <i class="fas fa-home"></i></a></li>
<li class="current"><a href="index.html">About <i class="fas fa-at"></i></a></li>
<li class="current"><a href="index.html">Services <i class="fas fa-wrench"></i> </a></li>
<li class="current"><a href="index.html">Contact <i class="fas fa-phone"></i> </a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Header End -->
---CSS---
nav ul li {
display: inline-block;
text-align: center;
width: 100px;
margin: 00px;
padding: 0px;
}