CSSの軽微な改修で英字、五十音表を中央に寄せたい

お世話になります。

上記のサイトで
索引（見出し）検索をする　をクリックしたときに
表示される英字、五十音表を中央に寄せたいです。

marginなど色々調べてやったのですが、上手く中央にならず、
とりいそぎ padding-left: 300px;でごまかしています

広めの画面に映すとどうしても左に寄ってしまいます。

できるだけCSSの大幅な改修は避けて少しの修正でできるとありがたいです。

※スマホでは表示されない項目なので、PCでお願いします。

該当部分を一部抜粋しますが、必要に応じてサイトのCSSを直接参照頂けると幸いです。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
.nav {
list-style: none;
overflow: hidden;
background:rgba(255, 255, 255, 0);
padding-left: 300px;
}

.nav li {
width: 30px;
text-align: center;
background: #0004ff;
border:1px solid #000000;
float: left;
height: 30px;
line-height: 30px;
margin-right: 5px;
padding: 0px;
border-radius: 20%
margin-bottom: 2px;
/text-decoration: underline;/
font-size: 28px;

}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<div class="accordion-list"> <h3 class="question"><div class="text-plus">＋</div> 索引（見出し）検索をする</h3> <div class="answer"> <ul class="nav"> <li>Ａ</li> <li>Ｂ</li> </ul> <ul class="nav"> <li>Ａ</li> <li>Ｂ</li> </ul>

※省略

<!--アコーディオンanswer end-->
</div>
<!--アコーディオンanswer end-->

</div>

行動規範の内容に同意します

回答1件

ベストアンサー

ユーザースタイルシートで確認した限りでは、これで左右均等になるはず。
.nav liのスタイルからはfloat: left;を削除してください。

CSS
1.nav {
2    overflow: hidden;
3    background:rgba(255, 255, 255, 0);
4    padding: 0;
5    border: green solid 1px; /* 確認用 */
6    display: flex;
7    justify-content: center;
8    list-style: none;
9}
10