ロゴの横にナビを並べたいです。

Question

独学で勉強している者です。
こちらのテックアカデミーさんのようにロゴの横にナビを並べたいのですが、なぜかマージンがついてしまいどうしようもなく質問しました。
もちろんマージンも記入していませんし改行も入れていません。

何が原因なのかお手上げ状態です。

追記です。
オレンジの部分をなくしたいです。
横にあ〜のナビが並ぶようにしたいです。
ボディや他の指定でもマージンは設定していません。
書籍通りに書いているのですが・・・なぜなのか・・・

div#header {
	background-color: #ffd6d7;
	width: 100%;
	height: 120px;
	margin: auto;
}

p#logo {
	width: 107px;
	height: 32px;
	margin: 0;
	padding-left: 40px;
}

div#header div#nav ul {
	list-style: none;
	height: 40px;
	margin-right: 40px;
	display: flex;
}

div#header div#nav ul li { flex: 1 1 auto; }

div#header div#nav ul li a {
  background-color: #FFF;
	width: 120px;
	height: 40px;
	line-height: 1;
	border-radius: 8px;
	display: block;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}

div#header div#nav ul li a:hover {
	background-color: #ef5e69;
	color: #FFF
}

HTML↓

<div id="header">
  <p id="logo"><img src="#" alt="logo"></p>
<!-- nav  -->
    <div id="nav">
      <ul>
        <li><a href="#">あ</a></li>
        <li><a href="#">い</a></li>
        <li><a href="#">う</a></li>
        <li><a href="#">え</a></li>
        <li><a href="#">お</a></li>
        </ul>
    </div>
<!-- nav  -->
</div>
<!-- header  -->

Comments

[itagagaki]

HTMLコードも載せてください。

[xRuix]

関連していそうなところ？を追加しました。

Answer 1

flex-growに1を設定していることで、親要素の幅いっぱいに各要素が（各要素が）伸長しています。
ここは0にしておくといいようです。

div#header div#nav ul li { flex: 0 1 auto; }

そして右に寄せるためには、div#header div#nav ulにjustify-content: flex-end;を入れるといいと思います。

Comments

[xRuix]

早急なお返事ありがとうございます。
お教えいただいたように修正したのですが、どうしてもロゴと同じ行にナビが入ってきません・・・
左のロゴで改行されてしまいます。

[itagagaki]

<p id="logo"> と <div id="nav"> はどちらもブロックレベル要素ですので縦にレイアウトされます。
したがって p#logo の heiight: 32px の分だけ div#nav が下に下がってレイアウトされます。
手っ取り早い解決策は p#logo の heiight を 0 にしちゃうという手があります。

[xRuix]

こんな裏技（？）が！
ナビも横に並び、これでひとまず先に進めそうです。
ありがとうございます。