ウィンドウ全体に均等にスペースナビゲーションが適用されます（応答性）

Question

ページの上部にナビゲーションを均等に配置しようとしていますが、左側と右側と各リンクの間に空きスペースがなくなりました。私はおそらくCalc関数を使うことができますが、古いバージョンのブラウザでは十分サポートされていないので、別の方法を探しています。

私の現在のコード：あなたの助けを

.nav { 
 
    z-index: 1; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: #252839; 
 
} 
 

 
.nav ul { 
 
    list-style-type: none; 
 
    width: 100%; 
 
} 
 

 
.nav ul li{ 
 
    color: #b5b5b7; 
 
    padding: 15px 0; 
 
    font-size: 1.2em; 
 
    display: inline-block; 
 
} 
 

 
.nav ul li:hover { 
 
    background-color: #677077; 
 
    color: #89C4F4; 
 
}

<div class="nav"> 
 
    <ul> 
 
    <a href="#home"><li>Home</li></a> 
 
    <a href="#profile"><li>Profile</li></a> 
 
    <a href="#experience"><li>Experience</li></a> 
 
    <a href="#abilities"><li>Abilities</li></a> 
 
    <a href="#projects"><li>Projects</li></a> 
 
    <a href="#contact"><li>Contact</li></a> 
 
    </ul> 
 
</div>

ありがとう！

Answer 1

使用display:flexとflex-grow: 1display: blockに内aタグを変更し、テキストを中央揃え、その後、li要素を拡大します。

.nav { 
 
    z-index: 1; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: #252839; 
 
} 
 

 
.nav ul { 
 
    list-style-type: none; 
 
    width: 100%; 
 
    padding: 0; 
 
    display: flex; 
 
} 
 

 
.nav ul li{ 
 
    flex-grow: 1; 
 
} 
 

 
.nav ul li a { 
 
    display: block; 
 
    text-align: center; 
 
    color: #b5b5b7; 
 
    font-size: 1.2em; 
 
    padding: 15px 0; 
 
} 
 

 
.nav ul li a:hover { 
 
    background-color: #677077; 
 
    color: #89C4F4; 
 
}

<div class="nav"> 
 
    <ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#profile">Profile</a></li> 
 
    <li><a href="#experience">Experience</a></li> 
 
    <li><a href="#abilities">Abilities</a></li> 
 
    <li><a href="#projects">Projects</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 
</div>