justify-content: space-between; で右側に余白ができるのですがどのようにすれば消すことができますか？

前提

一冊で身につくhtml&cssとwebデザイン入門講座という本で学習しているのですが、そこでフッターにロゴとメニューを表示し、justify-content: space-between;　で左右両端にロゴとメニューを配置することを行うのですが、コードをそのまま見て写してもうまく表示できないません。画面右側の端に表示されるはずのメニューの右側に余白ができてしまっています。
どのようにすれば解決できるかを教えてくださるとありがたいです。

実現したいこと

justify-content: space-between;　で、できる右側の余白をどのようにすれば消すことができますか？

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

このように右側の紫で表示されている余白が出てしまっています。

該当のソースコード

HTML
1index.html
2
3<body>
4        <header class="page-header wrapper">
5        <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
6            <nav>
7                <ul class="main-nav">
8                    <li><a href="news.html">News</li>
9                    <li><a href="menu.html">Menu</li>
10                    <li><a href="contact.html">Contact</li>
11                </ul>
12            </nav>
13        </header>
14    </body>
15

CSS
1style.css
2/*--- HEADER ---*/
3.logo {
4    width: 210px;
5    margin-top: 14px;
6}
7.main-nav {
8    display: flex; 
9    font-size: 1.25rem;
10    text-transform: uppercase;
11    margin-top: 34px;
12    list-style: none;
13}
14.main-nav li {
15    margin-left: 36px;
16}
17.main-nav a {
18    color: #432;
19}
20.main-nav a:hover {
21    color: #0bd;
22}
23.page-header {
24    display: flex;
25    justify-content: space-between;
26}
27

試したこと

他のサイトでjustify-content: space-between; がうまく表示されない方法の考えられる原因
・marginを書いている
・content: ""; が書かれている
を確認したのですが解決できず、このサイトで似たような質問をみてみたのですが、あまり理解できず解決できませんでした。

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

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

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

回答1件

ベストアンサー

News、Menu、Contactそれぞれ閉じタグ</a>が抜けているため、タグ構造がおかしくなってしまっているようです。
（貼ってくださっている開発者ツールの画像でも、
<header>の中にあるべきContactの<a>が、<header>の外にあるのがお分かりいただけるかと思います。）

投稿2022/07/29 22:41