title: How to center a logo in nav bar
body: <p>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.</p>
  
  <p>HTML</p>
  
  <pre><code> &lt;nav class="main-nav-outer" id="test"&gt;
          &lt;div class="container"&gt;
              &lt;ul class="main-nav"&gt;
                  &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#service"&gt;Services&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#SeasonalSpecials"&gt;Seasonal Specials&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="small-logo"&gt;
                      &lt;a href="#header"&gt;&lt;img src="img/logo.png" alt=""&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#Products"&gt;Products&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#team"&gt;Team&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#contactbanner"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;a class="res-nav_click" href="#"&gt;&lt;i class="fa-bars"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    .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;
  }
  </code></pre>