1冊ですべて身につくHTML &CSSとWebデザイン入門講座　flex box効かない

前提・実現したいこと

1冊ですべて身につくHTML &CSSとWebデザイン入門講座の本を使い、html&CSSを勉強している者です。
実際にatomのテキストエディターを使い、手を動かし学んでいます。
”CHAPTER４−４のロゴとナビゲーションメニューを横並びにしよう”という部分で横並びにならなくつまずいております。

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

display:flex;が効かない。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>WCB Cafe</title>
    <meta name　= "description" content ="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">

  <!-- CSS -->
    <link rel ="stylesheet" href = "https://unpkg.com/ress/dist/ress.min.css">
    <link href ="https://fonts.googleapis.com/css?family=philosopher" rel = "stylesheet">
    <link href ="WCBCafe.css" rel ="stylesheet">
  </head>

  <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>
</html>

@charset "UTF-8";
/*共通部分
----------------------------- */
html {
  font-size: 100%;
}
body {
  font-family: "Yu gothic Medium", "游ゴシック　Medium", "游ゴシック体","ヒラギノ角ゴ　Pro W3" ,sans-sans-serif;
  line-height:1.7;
    color:#432;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
}
/*header
------------------------------ */
.logo {
  width:210px;
  margin-top:14px;
}
.main-nav {
    display: flex;
    font-size: 1.25rem;
    text-transform: 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;
}