HTML/CSS: how to center heading in navbar with flexbox?

Question

I'm quite new to html programming and trying some new things, so please bear that in mind ;) I'm trying to center my heading (London) in my navbar, while the other links before the heading stay on the left side, and the ones after stay on the right side.

I have tried to use margin auto on the heading, but i can't seem to get it right. Do you have any suggestions?

  .nav {
  width: 800px;
  display: flex;
  background: blue;
  align-items: center;
  justify-content: space-between;
}

body,
html {
  margin: 0;
  padding: 0;
}

.nav ul {
  padding: 0 5;
  list-style-type: none;
  background: white;
  display: flex;
  align-items: center;
  background: none;
  flex-wrap: wrap;
}

.nav ul li a {
  text-decoration: none;
  padding: 0px 22px;
  display: block;
  line-height: 1;
  color: black;
}

<!--#overskrift {
  margin-left: auto;
  margin-right: auto;
  -->

<nav class="nav">
  <ul>
    <li>
      <i class="fa fa-home"></i>
      <a href="#">Hjem</a></li>
    <li>
      <i class="fa fa-map-marker" aria-hidden="true"></i><a href="#">Kart</a></li>
    <li>
      <i class="fa fa-bed" aria-hidden="true"></i>
      <a href="#">Hotel</a></li>
    <li id="overskrift"><i class="fa fa-building" aria-hidden="true"></i>london</li>
    <li id="sok">
      <form><input placeholder="søk" /><i class="fa fa-search"></i></form>
    </li>
    <li><i class="fa fa-info-circle" aria-hidden="true"></i><a href="#">Informasjon</a></li>
    <li id="facebook"><i class="fa fa-facebook-official" aria-hidden="true"></i><a href="#">Lik oss!</a></li>
  </ul>
</nav>

Answer 1

Try to use display: inline-block; in .nav ul li a.