JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="main-menu">
  <ul>
    <li class="home">
      <a href="/de"><img src="http://dummyimage.com/40x40/000/fff"></a>
    </li>
    <li class="second"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">One more Item</a></li>
    <li><a href="#">Another Item</a></li>
    <li class="last"><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}
li.home {
  padding: 0;
}
li {
  vertical-align: middle;
  padding-top: 10px;
}
nav {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  height: 40px;
}
li::after {
  //padding: 0em 0.4em;
  content: '\00b7';
  pointer-events: none;
}
li.home::after,
li.last::after {
  content: none;
  text-align: justify;
}