質問: ### 前提・実現したいこと navの要素を左右真ん中に綺麗に配置したいです。ですが、まんなかのulが少し左にずれたようになり、うまく真ん中にきてくれません。 ### 発生している問題・エラーメッセージ ``` エラーメッセージ ``` ### 該当のソースコード html↓ AGENCE PROJETS ARTICLES CONTACT EN MANDATEZ-NOUS 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/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答: space-betweenは「要素同士の余白の幅を均一にする」ものなので、今回のように並べる要素の幅がばらばらの場合は考慮が必要です。 いろいろやり方はあると思うのですが、ぱっと思いつくのはlogo要素と右のul要素が同じ幅になるよう指定してあげるとかでしょうか。例えばcalcを使ってロゴの実際の幅+marginがul要素の幅と同じになるようにするとかですね。 試して見てください。