navを等間隔にしたいです

前提・実現したいこと

ナビゲーションメニューを等間隔で作成したいです。

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

flexboxを活用したいのですが、横並びにはなっても、左寄せのままで等間隔になりません

該当のソースコード

<nav>
    <div class="container">
        <ul>
            <li><a href="#">トップ</a></li>
            <li><a href="#concept">コンセプト</a></li>
            <li><a href="#menu">メニュー</a></li>
            <li><a href="#access">アクセス</a></li>
        </ul>
    </div>
</nav>

nav {
    background-color: #c20d23;

    ul {
        list-style: none;
        display: flex;
        justify-content: space-around;
        text-align: center;
    }
}

@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
}

header .container {
    display: flex;
}

#site_logo {
    width: 65%;
}

#site_reserve {
    width: 35%;
    text-align: right;
    margin-top: 10px;
}

.site_tel {
    font-size: 1.5em;
    color: #c20d23;
}

nav {
    background-color: #c20d23;

    ul {
        list-style: none;
        display: flex;
        justify-content: space-around;
        text-align: center;
    }
}

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>イタリアンレストラン</title>
</head>
<body>
    <header>
        <div class="container">
            <div id="site_logo">
                <h1>〜イタリアン〜</h1>
            </div>

            <div id="site_reserve">
                <p>ご予約はこちらから</p>
                <p class="site_tel">TEL 000-0000-000</p>
            </div>
        </div>

        <nav>
            <div class="container">
                <ul>
                    <li><a href="#">トップ</a></li>
                    <li><a href="#concept">コンセプト</a></li>
                    <li><a href="#menu">メニュー</a></li>
                    <li><a href="#access">アクセス</a></li>
                </ul>
            </div>
        </nav>
    </header>


    <main>
        <section id="main_img">
            <img src="" alt="">
        </section>

        
        <section id="concept">
            <div class="container">
                <img src="" alt="">
                <h2>コンセプト</h2>
                <img src="" alt="">
                <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
            </div>
        </section>

        <section id="menu">
            <div class="container">
                <img src="" alt="">
                <h2>メニュー</h2>

                <div class="menu_box">
                    <img src="" alt="">
                    <h3>パスタ</h3>
                    <ul>
                        <li>ぺぺ</li>
                        <li>パス</li>
                        <li>ソス</li>
                        <li>クリ</li>
                    </ul>
                </div>

                <div class="menu_box">
                    <img src="" alt="">
                    <h3>ピザ</h3>
                    <ul>
                        <li>まる</li>
                        <li>シー</li>
                        <li>こん</li>
                        <li>えび</li>
                    </ul>
                </div>

                <div class="menu_box">
                    <img src="" alt="">
                    <h3>ドリンク</h3>
                    <ul>
                        <li>なま</li>
                        <li>じん</li>
                        <li>ワイ</li>
                        <li>歌詞</li>
                        <li>かく</li>
                    </ul>
                </div>
            </div>
        </section>

        <section id="access">
            <div class="container">
                <img id="access_logo" src="" alt="">
                <h2>アクセス</h2>

                <div id="access_map">
                    <iframe src="https://goo.gl/maps/9iCAUPRSoENdM31K8" frameborder="0"></iframe>
                </div>

                <div id="access_txt">
                    <p>
                        〒000-0000 あああああああああああ
                    </p>
                    <p>
                        TEL:000-0000-0000
                    </p>
                    <p>
                        営業時間:11:00~22:00
                    </p>
                    <p>
                        定休日:火曜日
                    </p>
                </div>

                <div id="access_reserve">
                    <p>ご予約はこちらから</p>
                    <p class="site_tel">TEL:000-0000-0000</p>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <img src="" alt="">
        <p>Copyright &copy; ああああああああ</p>
    </footer>
</body>
</html>

試したこと

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

kei344

2020/06/01 06:50

HTMLとSCSSは別のコードブロックに入れてください。また、「左寄せ」が再現しないため、HTML/SCSSの全体を提示することをお勧めします。 https://jsfiddle.net/9ux73btj/

kei344

2020/06/01 08:09

https://jsfiddle.net/gt89pje3/ ←このサンプルで「左寄せのままで等間隔になりません」になりますか？確認してみてください。

commandR

2020/06/01 09:00

こちらでは等間隔になっております。

kei344

2020/06/01 09:03

ではHTML/SCSS全体を提示してください。他の箇所に原因が在ると思われます。

commandR

2020/06/01 09:07

解答者様の提案を試してみたところ解決いたしました。 ulが潰れていたようです。一応、全体像を更新いたします。なぜ、このような違いが出たのでしょうか？？

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

回答2件

動くサンプル：https://jsfiddle.net/s7fv5r9n/

↑状況が再現しました。

CSS
1header .container {
2    display: flex;
3}
4```↓
5```CSS
6header > .container {
7    display: flex;
8}
9```**動くサンプル：**[https://jsfiddle.net/s7fv5r9n/1/](https://jsfiddle.net/s7fv5r9n/1/)

投稿2020/06/01 09:15

kei344

総合スコア69458

ベストアンサー

navを等間隔にしたいです

提供していただいたソースコードだと、上記は達成できていました。
おそらくこちらに提供していないソースコードを見ないと、適切に回答できないと思います。

が、2点、もしかしたらこれで実現したいことへのヒントになるかも、というソースコードを挙げてみます。

[1] 余白を均等にする

CSS
1/* 追加 */
2nav ul {
3    width: 100%; /* ulが横方向に潰れてしまっているかもしれません。もしかしたらulでなくnavかもしれません。 */
4}

[2] 横幅を均等にする (「等間隔にする」というのをあえて曲解)

CSS
1/* 追加 */
2nav ul li {
3    flex: 1 1 0%;
4    display: block;
5}
6nav ul li a {
7  display: block;
8  text-align: center; /* 文字の中央寄せ */
9}

投稿2020/06/01 07:09

編集2020/06/01 07:20

new1ro

総合スコア4528

commandR

2020/06/01 09:04

［１］を試したところ、解決いたしました！ありがとうございます！ちなみに、なぜ潰れてしまっていたのでしょうか？？

new1ro

2020/06/01 09:30

経験則です。「display: flex;」のとき潰れることがあるな、という... ソースコードがすべて見れると、回答できるかもしれません。 ↓また以下の仕様を見てみると答えがあるかもしれません。 https://developer.mozilla.org/ja/docs/Web/CSS/display

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

あなたの回答