htmlについて

すみません。
ｈｔｍｌで質問です。
<div class="nav">
<ul>
<a href="#"><li>MENU1</li></a>
<a href="#"><li>MENU2</li></a>
<a href="#"><li>MENU3</li><
<a href="#"><li>MENU4</li></a>
</ul>
</div>
こちらを中央寄せしたいのですができないので教えてください。
navは自分で書いて、div display block はもともとブラウザ（グーグル）書いてありました。
以下、ｃｓｓ
.nav {
margin: 0 auto;
text-align: center;

}
.nav ul{
text-align:center;
list-style: none;
display: flex;
}
.nav li{
background-color:#101010;
margin-right:2%;
}
.nav a{
font-size:3vw;
color:#fff;
width:20%;
}

user agent stylesheet
div {
display: block;

No.2 ベストアンサー 回答者： ほーほけきょッ 回答日時： 2020/11/23 12:44

現状、div 自体は中央寄せされています。

→div と li の CSS の中に「border-style: solid;」を入れるとどの領域をとっているかわかります。

問題は「リスト要素を横並びで中央寄せ」する方法ですが、正規の方法ではできないので、いろいろな裏技があります。まさに「リスト要素を横並びで中央寄せ」で検索するといろいろと出てきますので、都合の良い方法をお選びください。
個人的には、横幅をしっかりと計算して、キッチリ横幅が収まるdivをつくって、それを中央寄せする方法がわかりやすいかなと思います。

No.3 回答者： t_fumiaki 回答日時： 2020/11/23 13:57

navは中央配置されてます。

ulを中央配置にすれば良いのでは？

.nav ul{　内に　margin: 0 auto;　を追加

No.1 回答者： ぐーるぐる 回答日時： 2020/11/23 12:28

ここに

.nav li{
background-color:#101010;
margin-right:2%;
}

これ入れたら？
text-align: center;