見出しが背景画像の中心にきません（教科書の模写がうまくいってない）

初めて投稿させていただくものです。
拙い点などありましたら申し訳ありません。

本題ですが、「1冊ですべて身につくHTML＆CSSとWebデザイン入門講座」の5章の見出し部分を作成しているのですが、
教科書の結果が得られません。本来背景画像の垂直方向の中心位置に「NEWS」の見出しがくるはずなのですが、背景画像からはみ出ている状態です。
過去同じような投稿がありましたが、どの投稿に書かれているものを試してみてもうまくいきませんでした。
うまく行かない原因をご教示いただけましたら幸いです。
拙いコードではありますが、添付させていただいています。
よろしくお願いいたします。

■開発環境
エディタ：VSCODE
ブラウザ：Chrome

-教科書結果

-質問者結果

【試してみたこと】
１.過去投稿に書かれていた内容実施（タグの閉じ忘れの確認、CSSファイルのコード修正等）
2.追加部分の

<div class="wrapper"></div> <h2 class="page-title">News</h2> </div> の位置を入れ替え

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>WVA Cafe-NEWS</title>
6        <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
7
8        <!-- CSS -->
9        <link href = "https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
10        <link rel="stylesheet" href="css/stlyle.css">
11        <link rel="icon" type="image/png" href="images/favicon.png">
12    </head>
13
14    <body>
15        <div id="news" class="big-bg">
16            <header class="page-header wrapper">
17                <h1><a href="index.html"><img class="logo" src = "images/logo.svg" alt="WCBカフェフォーム"></a></h1>
18                <nav>
19                    <ul class="main-nav">
20                        <li><a href="news.html">News</a></li>
21                        <li><a href="menu.html">Menu</a></li>
22                        <li><a href="contact.html">Contact</a></li>
23                    </ul>
24                </nav>
25            </header>
26
27            <div class="wrapper"></div>
28                <h2 class="page-title">News</h2>
29            </div><!--/.wrapper-->
30        </div> <!--/#news -->
31    </body>
32    
33</html>

CSS
1@charset "UTF-8";
2
3/*共通部-----*/
4html{
5    font-size:100%;
6}
7
8body{
9    font-family: "Yu Gothic Medium","游ゴシック Medium",YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
10    line-height: 1.7;
11    color: #432;
12}
13
14a{
15    text-decoration: none;
16}
17
18img{
19    max-width: 100%;
20}
21
22/*HEADER-----*/
23.logo{
24    width:210px;
25    margin-top: 14px;
26}
27
28.main-nav{
29    display:flex;
30    font-size:1.25rem;
31    text-transform: uppercase;
32    margin-top: 34px;
33    list-style: none;
34}
35
36.main-nav li{
37    margin-left:36px;
38}
39
40.main-nav a{
41    color: #432;
42}
43
44.main-nav a:hover{
45    color: #0bd;
46}
47
48.page-header{
49    display:flex;
50    justify-content: space-between;
51}
52
53.wrapper{
54    max-width: 1100px;
55    margin: 0 auto;
56    padding: 0 4%;
57}
58
59/*HOME-----*/
60.home-content{
61    text-align: center;
62    margin-top: 10%;
63}
64
65.home-content p{
66    font-size: 1.125rem;
67    margin: 10px 0 42px;
68}
69
70/*見出し*/
71.page-title{
72    font-size: 5rem;
73    font-family: 'Philosopher', serif;
74    text-transform: uppercase;
75    font-weight: normal;
76}
77
78/*ボタン*/
79.button{
80    font-size: 1.375rem;
81    background: #0bd;
82    color: #fff;
83    border-radius: 5px;;
84    padding: 18px 32px;
85}
86
87.button:hover{
88    background: #0090aa;
89}
90
91/*大きな背景画像*/
92.big-bg{
93    background-size: cover;
94    background-position: center top;
95}
96
97#home{
98    background-image: url(../images/main-bg.jpg);
99    /* background-image: linear-gradient(#c9ffbf, #ffafbd); */
100    min-height: 100vh;
101}
102#home .page-title{
103    text-transform: none;
104}
105
106/*NEWS-----*/
107#news{
108    background-image: url(../images/news-bg.jpg);
109    height:270px;
110    margin-bottom:40px;
111}
112
113#news .page-title{
114    text-align: center;
115}
116
117

m.ts10806

2021/07/12 14:01

デザインパターン　は本件とは関係ないかと。 https://teratail.com/tags/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3

Atsukichi

2021/07/12 14:24

申し訳ありませんでした。以後適切なタグをつけられるよう気をつけます。

m.ts10806

2021/07/12 20:46

質問は編集できます。後から見る人のためにも調整しておいてください。

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

回答1件

ベストアンサー

試してみたこと：タグの閉じ忘れの確認
と書いてありますが、とりあえず以下の閉じタグは余計です。

javascript
1<div class="wrapper">//</div>

回答

h2などの要素にはデフォルトcssが当てられており、h2の（上下）デフォルトマージンは0.83emです。
今回は16px * 5rem * 0.83emで上に66.4pxのマージンが存在します。

とりあえず.page-titleのmarginを0にしたところ、それっぽい位置に移動しましたがいかがでしょうか？

css
1.page-title {
2  margin: 0;
3}

ただ、質問者様の結果と教科書の結果でフォントサイズや横方向の揃えが異なっているように見えます。今一度教科書と内容が同じか確認してみてください。

追記

ブラウザの開発者ツールで、要素の状態（スタイルなど）を確認することが出来ます。そちらで確認いただければ自分でも解決できたかとおもいますので、今後の参考にしてください。

投稿2021/07/12 14:20

k_a

総合スコア983

k_a

2021/07/12 14:27

m.ts10806さんのいうとおり、「デザインパターン」タグ（「文字コード」タグも）は不要かと思いますので、質問を編集して外しておいてください。

Atsukichi

2021/07/12 14:29

ご教示いただきありがとうございました。無事解決いたしました。私の確認不足等が多くあり、力不足でした。今後、教えていただきましたツール等を使用して、自分で調べていけるよう努力していきます。改めて回答いただきましてありがとうございました。

k_a

2021/07/12 14:32

模写と書いてありましたね。失礼しました。 h2以外にも色々なタグにデフォルトcssは存在するので、ときに想定外の結果になることがあります。まっさらな状態でコーディングをしたい場合は「リセットcss」などで検索すればそれらを取り外せるので、今後なにかあればお試しください。

Atsukichi

2021/07/12 14:46

ありがとうございます。CSSのリセット等、私のミスがありました。原因が分かりましたので、今後開発の際に生かしていきたいと思います。今後ともよろしく医お願いいたします。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

見出しが背景画像の中心にきません（教科書の模写がうまくいってない）

回答

追記

関連した質問