Li center when image

by k_sav

HTML

<body>
  <header>
    <nav id="navbar">
      <ul>
        <li><b><a href="index.html"><img class="logo" src="https://i28.servimg.com/u/f28/09/04/03/75/a_2_li10.png" alt="HOME"></a></b></li>
        <li><b><a href="more.html">MORE</a></b></li>
        <li><b><a href="services.html">SERVICES</a></b></li>
        <li><b><a href="blog.html">BLOG</a></b></li>
        <li><b><a href="shop.html">SHOP</a></b></li>
      </ul>
    </nav>
  </header>


</body>

CSS

body {
  background-color: #294F6D;
  margin: 0;
}

#navbar ul {
  margin: 0;
  list-style: none;
  background-color: #303E73;
  text-align: center;
}

#navbar li {
  display: inline-block;
  background-color: #A13647;
  padding: 20px 50px
}

a {
  text-decoration: none;
  color: white;
}

a:hover {
  text-decoration: underline;
}

.logo {
  width: 100px;
}