I'm struggling to center a logo within the navigation bar of a website I am designing. Despite my attempts, I have not been successful in achieving the desired result. My goal is to have the logo positioned in the middle of the navigation bar, with other elements appearing on either side of it. Currently, everything including the logo is evenly spaced out, resulting in it being off-center. Any guidance or suggestions would be greatly appreciated.
HTML
<nav class="main-nav-outer" id="test">
<div class="container">
<ul class="main-nav">
<li><a href="#home">Home</a></li>
<li><a href="#service">Services</a></li>
<li><a href="#SeasonalSpecials">Seasonal Specials</a></li>
<li class="small-logo">
<a href="#header"><img src="img/logo.png" alt=""></a>
</li>
<li><a href="#Products">Products</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#contactbanner">Contact</a></li>
</ul>
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
</div>
</nav>
CSS
.main-nav-outer{
padding:0px;
border-bottom:1px solid #dddddd;
box-shadow:0 4px 5px -3px #ececec;
position:relative;
background:#fff;
}
.main-nav{
text-align:center;
margin:10px 0 0px;
padding:0;
list-style:none;
}
.main-nav li{
display:inline;
margin:0 1px;
}
.main-nav li a{
display:inline-block;
color:#222222;
text-transform:uppercase;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
line-height:20px;
margin:17px 32px;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
.main-nav li a:hover{
text-decoration:none;
color: #ec5020;
}
.small-logo{
padding:0 32px;
margin: 0;
}
.main-section{
padding:20px 0 110px;
}