サイト上部の余白の消し方について

前提・実現したいこと

プログラミング独学を初めて１週間の超初心者です。
只今「1冊で全て身に付くHTML＆CSSとWebデザイン」のチャプター４、5（フルスクリーン、２カラムのレイアウト）を教材にそって学習しております。

質問①　サイトの上部に余白ができてしまいます。
質問②　プログラミング学習において、こういう小さい問題も時間をかけて一つ一つ解決、模写はサンプルと全く同じものを作るまで完璧にする。というものですか？

何度も参考書のサンプルデータと見比べてみましたが、解決しません。

私がこの教材で学んでいないような裏技で問題解決できるのかもしれませんが、個人的には、サンプルと同じ手順で、同じ方法ですすめたいと思っています。（模写をしている際に、どの段階で間違えていたのかを知って次気をつけれるようになりたいです。）

サンプルサイト

問題のサイト

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

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>WCB Cafe</title>
    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
    <link rel="icon" type="image/png" href="images/favicon.png">

    <link rel="stylesheet" href="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">
  　
  </head>

  <body>
    <div id="home" 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="home-content wrapper">
        <h2 class="page-title">We'll Make Your Day</h2>
        <p>おしゃれなカフェで癒されてみませんか？無添加の食材で体の中からリフレッシュ。</p>
        <a class="button" href="menu.html">メニューを見る</a>
      </div><!-- /.home-content -->
    </div><!--/#home -->
  </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;
  


}

a {
  text-decoration: none;
}
img {
  max-width: 100%;
}
.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
}
.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;
}

/*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;
}

HTML　CSS

試したこと

①リセットCSSを何度も記入し直した
②他のリセットCSSを試した（YahooのリセットCSSなど）　→さらに乱れた気がしました。。
③body{margin: 0;}を追加
試しましたが、どれもうまく行きませんでした。

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

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

plasticgrammer

2021/01/16 22:07

ブラウザの開発者ツールを使うと問題の原因特定が楽になりますが、確認していますか？開発者ツール表示後に、各要素を選択すると表示エリアがハイライトされるので、余白が誰のものかわかるかと思います。

Apocanblog

2021/01/17 05:08

回答ありがとうございました。ディベロッパーツールは一応確認したのですが、いまいちよく見方をわかっていませんでした。使い方を調べて習得します！今後は開発者ツールを使って自分で原因を見つけられるよう頑張ります！

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

回答2件

ベストアンサー

html
1  　
2  </head>

</head>の前にある全角空白を削除するといいでしょう。

投稿2021/01/17 01:01

hatena19

総合スコア34073

nomura02

2021/01/17 03:24

原因は全角だったのですね！！！しゃしゃりでてしまいすみませんでした！！

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

こんにちは！
私も、勉強を始めてから8ヶ月の初心者です！

間違ってたら大変恐縮なのですが…記載されていたコードを自分のエディタに貼り付けて、
plasticgrammer様がおっしゃられているようにGoogleで検証したところ
bodyのmarginに上下左右8pついてましたのでこれでしょうか…？

CSSは書いた順番が違うと、最後に書いたほうが優先されて上書きされてしまうのですが、それが原因でしょうか。

私は最後に
body{
margin:0px;
}
と書いたらその8pxは消えました。

ちなみに私が使ってるリセットCSSを最初(@charset "UTF-8";の上)に書いても消えました。

CSS
1/* 
2html5doctor.com Reset Stylesheet
3v1.6.1
4Last Updated: 2010-09-17
5Author: Richard Clark - http://richclarkdesign.com 
6Twitter: @rich_clark
7*/
8
9html,
10body,
11div,
12span,
13object,
14iframe,
15h1,
16h2,
17h3,
18h4,
19h5,
20h6,
21p,
22blockquote,
23pre,
24abbr,
25address,
26cite,
27code,
28del,
29dfn,
30em,
31img,
32ins,
33kbd,
34q,
35samp,
36small,
37strong,
38sub,
39sup,
40var,
41b,
42i,
43dl,
44dt,
45dd,
46ol,
47ul,
48li,
49fieldset,
50form,
51label,
52legend,
53table,
54caption,
55tbody,
56tfoot,
57thead,
58tr,
59th,
60td,
61article,
62aside,
63canvas,
64details,
65figcaption,
66figure,
67footer,
68header,
69hgroup,
70menu,
71nav,
72section,
73summary,
74time,
75mark,
76audio,
77video {
78    margin: 0;
79    padding: 0;
80    border: 0;
81    outline: 0;
82    font-size: 100%;
83    vertical-align: baseline;
84    background: transparent;
85}
86
87body {
88    line-height: 1;
89}
90
91article,
92aside,
93details,
94figcaption,
95figure,
96footer,
97header,
98hgroup,
99menu,
100nav,
101section {
102    display: block;
103}
104
105nav ul {
106    list-style: none;
107}
108
109blockquote,
110q {
111    quotes: none;
112}
113
114blockquote:before,
115blockquote:after,
116q:before,
117q:after {
118    content: '';
119    content: none;
120}
121
122a {
123    margin: 0;
124    padding: 0;
125    font-size: 100%;
126    vertical-align: baseline;
127    background: transparent;
128}
129
130/* change colours to suit your needs */
131ins {
132    background-color: #ff9;
133    color: #000;
134    text-decoration: none;
135}
136
137/* change colours to suit your needs */
138mark {
139    background-color: #ff9;
140    color: #000;
141    font-style: italic;
142    font-weight: bold;
143}
144
145del {
146    text-decoration: line-through;
147}
148
149abbr[title],
150dfn[title] {
151    border-bottom: 1px dotted;
152    cursor: help;
153}
154
155table {
156    border-collapse: collapse;
157    border-spacing: 0;
158}
159
160/* change border colour to suit your needs */
161hr {
162    display: block;
163    height: 1px;
164    border: 0;
165    border-top: 1px solid #cccccc;
166    margin: 1em 0;
167    padding: 0;
168}
169
170input,
171select {
172    vertical-align: middle;
173}
174
175/* ここまでリセットCSS */

質問②　プログラミング学習において、こういう小さい問題も時間をかけて一つ一つ解決、模写はサンプルと全く同じものを作るまで完璧にする。というものですか？
私は今実際に案件を頂き作っていますが、もう本当に小さい問題一つに一日解決するまでかかったりしています。初心者で、頼れる人が少ないのもあるかもしれませんが、
こういったサイトや、私はメンターさんがいるので、その方に聞いたりして、解決します。
模写は、サンプルと同じものを作ります！でもサンプルとまったく同じコードを書くのはむりなので、結局は上記のようにして、こういうふうに質問したりして、解決していく感じになると思います！
根気が必要ですよね！

もし参考になりましたら、幸いです。

投稿2021/01/16 23:44

nomura02

総合スコア133