header部分を左端にロゴ　右端にナビゲーションバーを入れたい

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

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

～～～html～～～

<body> <header claas="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;}

(fff9ccbb00223453f24d9e102468e1c0.jpeg)