HTML/CSS：フレックスボックスでナビゲーションバーの見出しを中央に移動する方法は？

Question

私はプログラミングと試してみるのはかなり新しいので、頭に入れておいてください）navbarに私の見出し（ロンドン）を集中させようとしています。左側、右側に滞在した後のものです。

私は見出しにマージン・オートを使用しようとしましたが、正しいとは言えません。何か提案はありますか？

.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

.nav ul li aでdisplay: inline-block;を使用してみてください。