スマートフォン向け表示設定について

よくわかるHTML5+CSS3の教科書第3版のサンプルサイトをデベロッパーツールで表示したものです。
ダウンロードしたコードなので、ミスはないはずなのですが、
この隙間はどうやったら埋まるのでしょうか？

tablet.css pc.cssにはまだ何も書かれていません。

html
1<html lang="ja">
2<head>
3<meta charset="utf-8">
4<meta name="viewport" content="width=device-width, initial-scale=1.0">
5<title>株式会社サンプルサイト</title>
6<link rel="stylesheet" href="base.css">
7<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 600px) and (max-width: 999px)">
8<link rel="stylesheet" href="pc.css" media="screen and (min-width: 1000px)">
9</head>
10<body>
11
12<header>
13  <div id="logo">
14    <img src="images/logo.png" srcset="images/logo2x.png 2x" alt="株式会社サンプルサイト">
15  </div>
16  <nav>
17    <ul>
18      <li><a href="#">ホーム</a></li>
19      <li><a href="#">お知らせ</a></li>
20      <li><a href="#">製品情報</a></li>
21      <li><a href="#">サービス</a></li>
22      <li><a href="#">会社概要</a></li>
23      <li><a href="#">お問い合わせ</a></li>
24    </ul>
25  </nav>
26  <picture>
27    <source media="(min-width:600px)" srcset="images/mv-1000.jpg, images/mv-2000.jpg 2x">
28    <img src="images/mv-s600.jpg" srcset="images/mv-s1200.jpg 2x" alt="日本のサンプルのリーディング・カンパニーを目指します。">
29  </picture>
30</header>
31
32<main>
33  <article>
34    <h1>サンプルだからこその“カタチ”がある</h1>
35    <p>わかりやすいサンプルはどうあるべきなのか？　その答えを知っているかどうかで<a href="#">サンプルの出来映え</a>は決まってきます。これはサンプルのテキストです。これはサンプルのテキストです。
36    </p>
37    <p>これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。
38    </p>
39  </article>
40  <div id="sub">
41    <article>
42      <h2>見えない部分へのこだわり</h2>
43      <p>これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。      
44      </p>
45    </article>
46    <article>
47      <h2>最高のサンプルを驚きのプライスで！</h2>
48      <p>これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。これはサンプルのテキストです。            
49      </p>
50    </article>
51  </div>
52</main>
53
54<footer>
55  <div id="footlinks">
56    <section>
57      <h3>オンラインショップ</h3>
58      <ul>
59        <li><a href="#">これはサンプルリンク</a></li>
60        <li><a href="#">サンプルのリンク</a></li>
61        <li><a href="#">これはサンプルリンク</a></li>
62        <li><a href="#">サンプルのリンク</a></li>
63        <li><a href="#">これはサンプルのリンク</a></li>
64      </ul>
65    </section>
66    <section>
67      <h3>アフターサービス</h3>
68      <ul>
69        <li><a href="#">サンプルのリンク</a></li>
70        <li><a href="#">サンプルリンク</a></li>
71        <li><a href="#">これはサンプルのリンク</a></li>
72        <li><a href="#">サンプルリンク</a></li>
73      </ul>
74    </section>
75    <section>
76      <h3>お客様サポート</h3>
77      <ul>
78        <li><a href="#">サンプルリンク</a></li>
79        <li><a href="#">これはサンプルのリンク</a></li>
80        <li><a href="#">これはサンプルのリンク</a></li>
81        <li><a href="#">サンプルリンク</a></li>
82        <li><a href="#">これはサンプルのリンク</a></li>
83      </ul>
84    </section>
85    <section>
86      <h3>社会活動・環境活動</h3>
87      <ul>
88        <li><a href="#">これはサンプルリンク</a></li>
89        <li><a href="#">サンプルのリンク</a></li>
90        <li><a href="#">サンプルリンク</a></li>
91        <li><a href="#">これはサンプルのリンク</a></li>
92      </ul>
93    </section>
94  </div>
95  <p id="copyright">
96    <small>Copyright © 2018 sample site. All rights reserved.</small>
97  </p>
98</footer>
99
100</body>
101</html>

base.css
1/* =======================================================
2 *   ページ全体
3 * ======================================================= */
4
5body {
6  margin: 0;
7  border-top: 7px solid #0086e9;
8  color: #000;
9  background: #fff;
10  font-family: sans-serif;
11}
12main, #footlinks {
13  margin: 1.2rem;
14}
15a:link, a:visited {
16  color: #0086e9; 
17}
18a:hover {
19  color: #000;
20}
21h1, h2, h3 {
22  margin: 0;
23  color: #000; 
24  line-height: 1;
25}
26
27
28/* =======================================================
29 *   ヘッダー
30 * ======================================================= */
31
32
33/* =======================================================
34 *   メインコンテンツ
35 * ======================================================= */
36
37
38/* =======================================================
39 *   フッター
40 * ======================================================= */
41