「一冊で全て身につくHTML＆CSSとWEBデザイン入門講座」という本のchapter5について

前提・実現したいこと

「一冊で全て身につくHTML＆CSSとWEBデザイン入門講座」という本のchapter5について
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

news.htmlのタイトルであるnewsが正しい位置に表示されない

エラーメッセージ

該当のソースコード

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>WCB Cafe - NEWS</title> <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ"> <link rel="stylesheet" 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/favicon.png"> </head> <body> <div id="news" class="big-bg"> <header class="page-header wrapper"> <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> <div class="wrapper"> <h2 class="page-title">News</h2> </div> </div> <div class="news-contents wrapper"> <article> メインエリア </article> <aside> サイドバー </aside> </div> <footer> <div class="wrapper"> <p><small>© 2019 Manabox</small></p> </div> </footer> </body> </html>

css

@charset "UTF-8";

/共通部分/
html {
font-size: 100%;
}
body {
font-family: "Yu Gothic Medium", "遊ゴシック Medium", YuGothic, "遊ゴシック体", "ヒラギノ角ゴ　Pro3 W3", 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;
}
.wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 4%;
}
/HOME/
.home-content {
text-align: center;
margin-top: 10%;
}
.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;
}
/ボタン/
.button {
font-size: 1.375rem;
background: #0bd;
color: #fff;
border-radius: 5px;
padding: 18px 32px;
}
.button:hover {
background: #0090aa;
}
/大きな背景画像/
.big-bg {
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
#home {
background-image: url(../images/main-bg.jpg);
min-height: 100vh;
}
#home .page-title {
text-transform: none;
}
/NEWS/
#news {
background-image: url(../images/news-bg.jpg);
height: 270px;
margin-bottom: 40px;
}
#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;
}

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

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

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

1T2R3M4

2021/05/02 02:59 編集

実装している■■な機能のPHPのソースコードを追記していただけませんか。 >以下のエラーメッセージが発生エラーメッセージを追記していただけませんか。

m.ts10806

2021/05/02 03:29

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 また質問テンプレート文言そのまま残ってるようでしたら削るか自身の状況に置き換えてください。他者には書かれている内容が全てです。赤の他人ゆえ、察することは不可能です。また、書籍を持っている人でないと回答できないのはマズいです。その書籍をたまたま持っている人が出てくるまで待ちますか？全ての人がその書籍を利用するわけではないでしょうし。ゆえに「正しい位置」を客観的に、本を持っていない人でもわかるように記載してください。