justify-content: space-betweenが効きません

こんばんは。「1冊ですべて身につく HTML&CSSとWebデザイン入門講座」を使用して勉強している者です。
htmlのh1がロゴ、navがナビゲーションになります。
指定したCSSは途中までしっかり表示されたので間違えてはいないはずです。
左端にロゴ　右端にナビゲーションバーを入れようと思い、htmlで<header class="page-header">と打ち、cssで
.page-header {display: flex;　justify-content: space-between;}と打ちました。
cssのdisplay: flex;の部分は効きましたが、その後のjustify-content: space-between;が効きません。

　　　　　　　こんな感じにしたいのですが…

何か間違えていることがあったらご教授お願いいたします。

～～～html～～～

<body> <header class="page-header"> <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1> <nav> <ul class="main-nav"> <li><a href="news.html">News</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> </body>

～～～CSS～～～

/HEADER--------/

.logo{width: 210px; margin-top: 14px;}
.main-nav {display: flex; font-size: 1.25rem; text-decoration: uppercase; margin-top: 34px; list-style: none;}
.main-nav li{margin-left: 36px;}
.main-nav a{color:#432;}
.main-nav a:hover{color: #0bd;}
.page-header {display: flex;　justify-content: space-between;}

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

回答1件

ベストアンサー

justify-content: space-between;の前に全角スペースがあるようです。
半角スペースに置き換えると解決すると思われます。

投稿2020/04/29 15:25

new1ro

総合スコア4528

water90

2020/04/29 15:29

申し訳ございませんうまくいかなかったです…

new1ro

2020/04/29 15:34

↓試してみました。こちらのソースコードを使ってみてください。 https://codepen.io/new1ro/pen/OJyjpww (CSSのキャッシュでは? と思います。)

water90

2020/04/29 15:51

ありがとうございます。 chromeのデベロッパーツールを確認したところ、justify-content: space-between;のチェック欄に印がついていない状態でした。印をつけるとしっかりと右に寄せることができます。一度ブラウザを閉じてもう一度開くと元に戻ってしまいます。これはどうすれば常にjustify-content: space-between;のチェック欄に印をつけている状態にできるのでしょうか？何度も質問申し訳ございません。よろしくお願いいたします。

water90

2020/04/30 11:26

いろいろやってたらできました。ご回答ありがとうございました。

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