html + cssで作成したメニューの表示がおかしい。

前提・実現したいこと

すみません。
中央寄せしたメニューが不可解な動きをするので
解消方法をご教示頂けるとありがたいです。

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

ブラウザ幅が最小の時は表示が正常だが、
ブラウザ幅が広がるにつれて、メニューがバラバラに広がっていく

該当のソースコード

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="icon" href="favicon.ico">
</head>
<body>
  <header>
    <div class="img">
      <img src="img/header.png">
      <!-- 画像サイズは858 x 366 -->
    </div>
 
      <div id="menu">
        <ul id="nav">
          <li><a href="#">MENU1</a></li>
          <li><a href="#">MENU2</a></li>
          <li><a href="#">MENU3</a></li>
          <li><a href="#">MENU4</a></li>
        </ul>
    </div>

  </header>

  <footer>

  </footer>
</body>
</html>

css

body {
  margin: 0;
  font-size: 16px;
  font-family: Verdana, sans-serif;
  color: #333;
}

header {
  text-align: center;
}

img {
  max-width: 100%;
}

.menu {
  text-align: center;
}

#nav {
  list-style: none;
  display: flex;
  margin: 0 auto;
  padding: 0;
}
 
#nav li {
  width: 140px;
  background-color: rgb(255, 133, 133);
  height: 50px;
  line-height: 50px;
  margin-right: 2px;
  margin: 0 auto;
}
 
#nav li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  padding: 20px;
}

試したこと

flexを無効にすると横並びが解除される代わりに、
正常に中央に表示されたので、flexが恐らく原因と思われる。

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

visual studio code 1.44.2

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

回答1件

ベストアンサー

あなたにとっては不可解かもしれませんが、記述されたコード通りの動作です。
どのような動作を想定していますか。

最大限推測すると、メニューの幅が、画像幅858px以上は広がらないようにしたいということかと思います。
だとしたら、例えば下記のように、max-width で最大幅を設定すればいいでしょう。
メニュー要素の配置は、justify-contentで指定するといいです。

css
1body {
2  margin: 0;
3  font-size: 16px;
4  font-family: Verdana, sans-serif;
5  color: #333;
6}
7
8header {
9  text-align: center;
10  max-width: 858px;
11  margin: 0 auto;
12}
13
14img {
15  width: 100%;
16}
17
18#nav {
19  list-style: none;
20  display: flex;
21  justify-content: space-between;
22  margin: 0;
23  padding: 0;
24}
25
26#nav li {
27  width: Calc(25% - 2px);
28  background-color: rgb(255, 133, 133);
29  height: 50px;
30  line-height: 50px;
31}
32#nav li a {
33  text-decoration: none;
34  color: #fff;
35  font-weight: bold;
36  padding: 20px;
37}