asideの見出しとメニューの間に隙間ができる

前提・実現したいこと

書籍でプログラミングを勉強中です。
書籍通りにプログラミングを書いたら、カテゴリーの下とこのお店についての下に隙間ができました。
この隙間を消したいのと、なぜこのような現象が起こるのかを知りたいです。
ちなみに、検証ツールで確認してみましたが、隙間の部分だけ範囲指定されませんでした。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Web Cafe - NEWS</title>
7  <link rel="stylesheet" href="css/index.css">
8  <link rel="stylesheet" href="css/news.css">
9</head>
10
11<body>
12  <div id="news" class="big-bg">
13    <header class="page-header wrapper">
14      <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
15      <nav>
16        <ul class="main-nav">
17          <li><a href="news.html">News</a></li>
18          <li><a href="menu.html">Menu</a></li>
19          <li><a href="contact.html">Contact</a></li>
20        </ul>
21      </nav>
22    </header>
23
24    <div class="wrapper">
25      <h2 class="page-title">News</h2>
26    </div> <!-- .wrapper -->
27
28    <div class="news-content wrapper">
29      <article> <!-- 記事 -->
30        <header class="post-info">
31          <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2>
32          <p class="post-date">3/30 <span>2019</span></p>
33          <p class="post-cat">カテゴリー：お店の紹介</p>
34        </header>
35        <img src="" alt="">
36        <p>
37          テキスト
38        </p>
39        <p>
40          テキスト
41        </p>
42        <p>
43          体に
44        </p>
45      </article>
46
47      <aside>　<!-- 広告 -->
48        <h3 class="sub-title">カテゴリー</h3>　<!-- 見出し -->
49        <ul class="sub-menu">　<!-- カテゴリーリスト -->
50          <li><a href="#">お店の紹介</a></li>
51          <li><a href="#">期間限定のメニュー</a></li>
52          <li><a href="#">イベント</a></li>
53          <li><a href="#">お客様との会話</a></li>
54        </ul>
55
56        <h3 class="sub-title">このお店について</h3>　<!-- 見出し -->
57        <p>　<!-- 本文 -->
58          体に
59        </p>
60      </aside>
61    </div><!-- /.news-content -->
62
63
64    <footer>
65      <div class="wrapper">
66        <p><small>&copy; 2019 Manabox</small></p>
67      </div>
68    </footer>
69  </div><!-- /#news -->
70</body>
71
72</html>
73

css
1/* NEWS */
2#news {
3  background-image: url(../images/art-art-materials-bright-743986-1024x768.jpg);
4  height: 270px;
5  margin-bottom: 40px;
6}
7
8#news .page-title {
9  text-align: center;
10}
11
12.news-content {
13  display: flex;
14  /* 中の子要素を横並びにする */
15  justify-content: space-between;
16  /* 中央に隙間を開ける */
17  margin-bottom: 50px;
18}
19
20/* 記事部分 */
21article {
22  width: 74%;
23}
24
25.post-info {
26  position: relative;
27  padding-top: 4px;
28  margin-bottom: 40px;
29  /* background-color: red; */
30}
31
32.post-date {
33  background: #0bd;
34  border-radius: 50%;
35  /* 図形の角を丸くする */
36  color: #fff;
37  width: 100px;
38  height: 100px;
39  font-size: 1.625rem;
40  text-align: center;
41  /* 内部を中央寄せ */
42  position: absolute;
43  top: 0;
44  padding-top: 10px;
45}
46
47.post-date span {
48  font-size: 1rem;
49  border-top: 1px rgba(255, 255, 255, 5) solid;
50  padding-top: 6px;
51  display: block;
52  width: 60%;
53  margin: 0 auto;
54}
55
56.post-title {
57  font-family: "Yu Mincho", "YuMincho", serif;
58  font-size: 2rem;
59  font-weight: normal;
60  /* フォントの太さ */
61}
62
63.post-title,
64.post-cat {
65  margin-left: 120px;
66}
67
68article img {
69  margin-bottom: 20px;
70  /* 画像の余白 */
71}
72
73article p {
74  margin-bottom: 1rem;
75  /* 　記事の余白 */
76}
77
78/* サイドバー */
79aside {
80  width: 22%;
81}
82
83.sub-title {
84  font-size: 1.375rem;
85  padding: 0 8px 8px;
86  border-bottom: 2px #0bd solid; /* 下線の設定 */
87  font-weight: normal;
88}
89
90aside p {
91  padding: 12px 10px;
92}
93
94footer {
95  background: #432;
96  text-align: center;
97  /* フッター内部を中央寄せ */
98  padding: 26px 0;
99}
100
101footer p {
102  color: #fff;
103  font-size: 0.875rem;
104}
105

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

macで制作しています

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

回答1件

ベストアンサー

HTMLファイルの該当部分付近の5か所に全角空白が混入しています。すべて削除してください。

HTML
1        <aside><!--　1つめの全角空白-->
2          <!-- 広告 -->
3          <h3 class="sub-title">カテゴリー</h3><!--　2つめの全角空白-->
4          <!-- 見出し -->
5          <ul class="sub-menu"><!--　3つめの全角空白-->
6            <!-- カテゴリーリスト -->
7            <li><a href="#">お店の紹介</a></li>
8            <li><a href="#">期間限定のメニュー</a></li>
9            <li><a href="#">イベント</a></li>
10            <li><a href="#">お客様との会話</a></li>
11          </ul>
12
13          <h3 class="sub-title">このお店について</h3><!--　4つめの全角空白-->
14          <!-- 見出し -->
15          <p><!--　5つめの全角空白-->
16            <!-- 本文 -->
17            体に
18          </p>
19        </aside>