navの要素を左右真ん中に綺麗に配置したいです。

Question

前提・実現したいこと

navの要素を左右真ん中に綺麗に配置したいです。ですが、まんなかのulが少し左にずれたようになり、うまく真ん中にきてくれません。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html↓

<nav> <div class="container"> <div class="logo"><img src="./img/ダウンロード.svg" alt=""></div> <ul> <li>AGENCE</li> <li>PROJETS</li> <li>ARTICLES</li> <li>CONTACT</li> </ul> <ul> <li><a>EN</a></li> <li><a>MANDATEZ-NOUS</a></li> </ul> </div> </nav> css↓ body{ width: 100vw; height: 100vh; padding: 0; margin: 0; } nav{ width: 100vw; background-color: white; /* text-align: center; */ } nav>.container{ width: 100%; display: flex; justify-content: space-between; align-items: center; } ul{ display: flex; list-style: none; margin: 0; padding: 0; } li{ display: inline; font-size: 12px; color:#444443; text-align: center; }

試したこと

display:flex; justify-content:space-betweenをやったのですが、真ん中のulが左側に寄ってしまいます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

space-betweenは「要素同士の余白の幅を均一にする」ものなので、今回のように並べる要素の幅がばらばらの場合は考慮が必要です。

いろいろやり方はあると思うのですが、ぱっと思いつくのはlogo要素と右のul要素が同じ幅になるよう指定してあげるとかでしょうか。例えばcalcを使ってロゴの実際の幅＋marginがul要素の幅と同じになるようにするとかですね。
試して見てください。

Comments

[yama3desu]

space-betweenはそういうものだったのですか。。。
詳しく教えていただきありがとうございます！

[yu-smc]

このページがわかりやすいので参照してみてください！
http://www.htmq.com/css/justify-content.shtml