レスポンシブデザインのCSSが反映されていない

（前回の質問を修正しました。）
初心者です。
ホームページ作成し、レスポンスデザインでモバイル版の表示にしようと思いコードを書いていましたが縦並びになりません。
書籍ではロゴの下にナビメニューが来るようになっているのですが全くならず困っています。
この問題はindex.HTMLとnews.htmlの両方に見られます。
縦並び以外にも余白など、レスポンシブデザインのコード自体が反映されていないように感じます。
どのようにすれば良いでしょうか？
よろしくお願いします。

<!-- index.html -->
<!doctype html>
<html lang="ja">
    <head>
        <meta cherset="utf-8">
        <title>UCHINEKO Cafe</title>
        <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
        <link rel="stylesheet" hres="https://unpkg.com/ress/dist/ress.min.css">
        <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <link rel="icon" type="image/png" href="images-rogo/favicon2.png">
        <style type="text/css">
            h2 { margin-top: 0;margin-bottom: 0;}
            p { margin-top: 0;margin-bottom: 0;}
        </style>
    </head>
    <body>
        <div id="home" class="big-bg">
            <header class="page-header wrapper">
              <hi><a href="index.html"><img class="logo" src="./images-rogo/UCHINEKO Cafeロゴ.png" alt="WCBカフェホーム"></a></hi>
                <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>
          <div class="home-content wrapper">
                <h2 class="page-title">Time To Spend With Cats</h2>
                <p>猫との時間を楽しんでみませんか？　看板猫達があなたをお待ちしています。</p>
                <a class="button" href="menu.html">メニューを見る</a>
          </div>
        </div>
    </body>
</html>

<!-- news.html -->
<!doctype html>
<html lang="ja">
    <head>
        <meta cherset="utf-8">
        <title>UCHINEKO Cafe -NEWS</title>
        <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
        <link rel="stylesheet" hres="https://unpkg.com/ress/dist/ress.min.css">
        <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <link rel="icon" type="image/png" href="images-rogo/favicon2.png">
        <style type="text/css">
            h2 { margin-top: 0;margin-bottom: 0;}
            p { margin-top: 0;margin-bottom: 0;}
        </style>
        <meta name="viewport" content="width=device-width,initial-scale=1">
    </head>
    <body>
        <div id="news" class="big-bg">
            <header class="page-header wrapper">
              <hi><a href="index.html"><img class="logo" src="./images-rogo/UCHINEKO Cafeロゴ.png" alt="WCBカフェホーム"></a></hi>
                <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>
          <div class="wrapper">
            <h2 class="page-title">News</h2>
          </div>
        </div>
        <div class="news-contents wrapper">
            <article>
                <header class="post-info">
                    <h2 class="post-title">DIYキャットタワーを改良しました</h2>
                    <p class="post-date">8/1 <span>2021</span></p>
                    <p class="post-cat">カテゴリー ： お店の紹介</p>
                </header>
                <img src="images-photo/IMG20210801151200.jpg" alt="店内の様子">
                <img src="images-photo/IMG20210802010558.jpg" alt="店内の様子">
                <p>
                    従来あったＤＩＹキャットタワーが猫達に不評だった為、この度新しく作り直しました。
                    以前のものよりも棚の高さを低くし、高齢の猫でも登りやすい高さに。
                    棚板の間隔も広く取り、ゆったりと座れるスペースを作りました。
                    棚の一部にはふわふわで柔らかい猫用ハンモックを使用。
                    丸い形が丸くなって眠る猫にはピッタリ！
                    さっそく使ってくれています。
                    新しいキャットタワーに座り、ゆったりとくつろぐ猫達にぜひ会いに来てください。
                </p>
                <p>猫との癒しの時間を提供する、UCHINEKO Cafe。</p>
            </article>

            <aside>
                <h3 class="sub-title">カテゴリー</h3>
                <ul class="sub-menu">
                    <li><a href="#">お店の紹介</a></li>
                    <li><a href="#">期間限定メニュー</a></li>
                    <li><a href="#">イベント</a></li>
                    <li><a href="#">お客様との会話</a></li>
                </ul>

                <h3 class="sub-title">このお店について</h3>
                <p>
                    猫との癒しの時間を提供する、UCHINEKO Cafe。
                </p> 
                <p>
                    5匹の猫達がお出迎えします。
                    猫それぞれ性格が異なっていて、甘えん坊の子や食いしん坊な子などいろいろなタイプの猫がいるので、きっと気に入った子を見つけられるでしょう。<br>
                    柔らかい猫との触れ合いで癒されてください。
                </p>
            </aside>
        </div><!-- /.news-contents -->
        <footer>
            <div class="wrapper">
                <p><small>&copy; 2021 UCHINEKO.biyori</small></p>
            </div>
        </footer>
    </body>
</html>

@charset "UTF-8";
html {
  font-size: 100%;
}
body {
  font-family: "Yu Gothic Medium","遊ゴシック Medium",YuGothic,"遊ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif;
  line-height: 1.7;
  color: #432;
  /* モバイル版プレビュー表示の幅 */
  max-width: 600px;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
}
.logo {
  width: 400px;
  margin-top: 14px;
  float:left;

}
.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: #fff;
}
.main-nav a:hover {
  color:#0bd;
}
.page-header {
  display: flex;
  justify-content: space-between;
}
.wrapper {
  margin: 0 auto;
  padding: 0 4%;
}
/* HOME
______________________________ */
.home-content {
  text-align: center;
  margin-top: 10%;
  color: #fff;
}
.home-content p {
  font-size: 1.125rem;
  margin: 10px 0 42px;
  
}

/* 見出し */
.page-title {
  font-size: 5rem;
  font-family: 'Philosopher', serif;
  text-transform: uppercase;
  font-weight: normal;
  color: #fff;
}

/* ボタン */
.button {
  font-size: 1.375rem;
  background: rgba(221, 118, 0, 0.822);
  color: #fff;
  border-radius: 5px;
  padding: 18px 32px;
  font-weight: bold;
  font-family: 'Philosopher', serif;
}
.button:hover {
  background: #aa5200;
}
/* 大きな背景画像 */
.big-bg {
  background-size: cover;
  background-position: center top;
}
#home {
  background-image: url(./cafe.jpg);
  background-color: #7c5026;
  background-blend-mode: hard-light;
  min-height: 100vh;
}
#home .page-title {
  text-transform: none;
}
/* NEWS */
#news {
 background-image: url(./nekocafe.jpg);
 height: 270px;
 margin-bottom: 40px;
 background-blend-mode: hard-light;
}
#news .page-title {
  text-align: center;
}
/* フッター */
footer {
  background: #432;
  text-align: center;
  padding: 26px 0;
}
footer p {
  color: #fff;
  font-size: 0.875rem;
}
/* 記事部分 */
article {
  width: 74%;
}
/* サイドバー */
aside {
  width: 22%;
}
.news-contents {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}
.post-info {
  position: relative;
  padding-top: 4px;
  margin-bottom: 40px;
}
.post-date {
  background: #7c5026;
  border-radius: 50%;
  color: #fff;
  width: 100px;
  height: 100px;
  font-size: 1.625rem;
  text-align: center;
  position: absolute;
  top: 0;
  padding-top: 10px;
}
.post-date span {
  font-size: 1rem;
  border-top: 1px rgba(255, 255, 255, .5) solid;
  padding-top: 6px;
  display: block;
  width: 60%;
  margin: 0 auto;
}
.post-title {
  font-family: "Yu Mincho","YuMincho",sefif;
  font-size: 2rem;
  font-weight: normal;
}
.post-title,
.post-cat {
  margin-left: 120px;
}
article img {
  margin-bottom: 20px;
}
article p {
  margin-bottom: 1rem;
}
.sub-title {
  font-size: 1.375rem;
  padding: 0 8px 8px;
  border-bottom: 2px #aa5200 solid;
  font-weight: normal;
}
aside p {
  padding: 12px 10px;
}
.sub-menu {
  margin-bottom: 60px;
  list-style: none;
}
.sub-menu li {
  border-bottom: 1px #ddd solid;
}
.sub-menu a {
  color: #432;
  padding: 10px;
  display: block;
}
.sub-menu a:hover {
  color: #aa5200;
}
/* モバイル版 */

@media (max-width: 600px) {
  .page-title {
    font-size: 2.5rem;
  }

  /* HEADER */
  .main-nav {
    font-size: 1rem;
    margin-top: 10px;
  }
  .main-nav li {
    margin: 0 20px;
  }

  /* HOME */
  .home-content {
    margin-top: 20%;
  }
  .page-header {
    flex-direction: column;
    align-items: center;
  }
  /* NEWS */
  .news-contents {
    flex-direction: column;
  }
  article,
  aside {
    width: 100%;
  }
  #news .page-title {
    margin-top: 30px;
  }
  aside {
    margin-top: 60PX;
  }
  .post-date {
    width: 70px;
    height: 70px;
    font-size: 1rem;
  }
  .post-date span {
    font-size: 0.875rem;
    margin-top: 10px;
  }
  .post-title,
  .post-cat {
    margin-left: 80px;
  }
}