How to center a logo in nav bar - html

Question

I'm having a hard time centering a logo on the nav bar for a website I'm working on. I've tried a few things but nothing has been successful. I want to have the logo in the center of the nav bar and the other items on the left and right of it. Currently, everything is spaced out evenly, including the logo, so it is not centered. Any help would be appreciated.
HTML
<nav class="main-nav-outer" id="test">
<div class="container">
<ul class="main-nav">
<li>Home</li>
<li>Services</li>
<li>Seasonal Specials</li>
<li class="small-logo">
<img src="img/logo.png" alt="">
</li>
<li>Products</li>
<li>Team</li>
<li>Contact</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;
}

Answer 1

you may wanna use bootstrap and try something like this
<nav class="main-nav-outer" id="test">
<div class="container">
<ul class="main-nav">
<div class="row">
<div class="col-xs-5">
<li>Home</li>
<li>Services</li>
<li>Seasonal Specials</li>
</div>
<div class="col-xs-2">
<li class="small-logo">
<img src="img/logo.png" alt="">
</li>
</div>
<div class="col-xs-5">
<li>Products</li>
<li>Team</li>
<li>Contact</li>
</div>
</div>
</ul>
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
</div>
</nav>
just change this selector in CSS with the below code
.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 10px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}

Answer 2

HTML:
<nav class="main-nav-outer" id="test">
<div class="container">
<ul class="main-nav">
<li>Home</li>
<li>Services</li>
<li>Seasonal Specials</li>
<li class="small-logo">
<img src="img/logo.png" alt="">
</li>
<li>Products</li>
<li>Team</li>
<li>Contact</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{
margin-left:auto;
margin-right: auto;
list-style:none;
}
.main-nav li{
display:inline;
}
.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;
}
.main-section{
padding:20px 0 110px;
}
Bootply

Answer 3

Try this:
.navbar-brand {
float: left;
text-align: center;
width: 378px;
}
.navbar-brand span {
margin: 0 auto;
text-align: center;
color:green;
}
.navbar-nav li a{
display:inline-block;
color:#222222;
text-transform:uppercase;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
line-height:20px;
transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<nav class="navbar navbar-fixed-top navbar-custom ">
<div class="container" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="#"><span class="navbar-logo">STACK OVERFLOW</span></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
<a class="navbar-brand hidden-xs text-center" href="#"><span class="navbar-logo">STACK OVERFLOW</span></a>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Menu Item 1</li>
</ul>
</div>
</div>
</nav>
When you click on Expand snippet you will see the result..