サイズが合わない原因が分かりません。

自分の入力したコード

html
1コード
2<!DOCTYPE html>
3<html>
4  <head>
5    <meta charset="utf-8">
6    <title>Progate</title>
7    <link rel="stylesheet" href="stylesheet.css">
8  </head>
9  <body>
10    <!-- ここからHTMLを書き始めてください -->
11    <div class="header">
12      <div class="header-logo">
13        Progate
14      </div>
15      <div class="header-list">
16        <ul>
17          <li>プログラミングとは</li>
18          <li>学べるレッスン</li>
19          <li>お問い合わせ</li>
20        </ul>
21      </div>
22    </div>
23    <div class="main">
24      <div class="container">
25        <h1>HELLO WORLD<span>.</span></h1>
26        <h2>プログラミングの世界へようこそ</h2>
27      </div>
28      <div class="contents">
29        <h3>学べるレッスン</h3>
30        <div class="contents-item">
31          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg" alt="" />
32          <p>HTML & CSS</p>
33        </div>
34        <div class="contents-item">
35          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg" alt="" />
36          <p>PHP</p>
37        </div>
38        <div class="contents-item">
39          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg" alt="" />
40          <p>Ruby</p>
41        </div>
42        <div class="contents-item">
43          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg" alt="" />
44          <p>Swift</p>
45        </div>
46      </div>
47    </div>
48  </body>
49</html>

css
1コード
2/* CSSのリセット（消さないでください） */
3html, body,
4ul, ol, li,
5h1, h2, h3, h4, h5, h6, p,
6form, input, div {
7  margin: 0;
8  padding: 0;
9}
10
11li {
12  list-style: none;
13}
14
15/* ここからCSSを記述してください */
16body {
17  font-family: "Avenir Next", sans-serif;
18}
19
20.header {
21  height: 90px;
22  background-color: #26d0c9;
23  color: #fff;
24}
25
26.header-logo {
27  float: left;
28  font-size: 36px;
29  padding: 20px 40px;
30}
31
32.header-list {
33  float: left;
34}
35
36.header-list li {
37  float: left;
38  padding: 33px 20px;
39}
40
41.main {
42  padding: 100px 80px;
43}
44
45.container h1 {
46  font-size: 140px;
47}
48
49.container span {
50  color: #ff4a4a;
51}
52
53.container h2 {
54  font-size: 60px;
55}
56
57
58.contents {
59  height: 500px;
60  margin-top: 100px;
61}
62
63.contents-item {
64  float: left;
65  padding-right: 40px;
66}
67.contents h3 {
68  border-bottom: 2px solid #dee7ec;
69  padding-bottom: 15px;
70  font-size: 28px;
71  margin-bottom: 50px;
72}
73
74.contents-item p {
75  font-size: 24px;
76  margin-top: 30px;
77}

答えのコード

html
1コード
2<!DOCTYPE html>
3<html>
4  <head>
5    <meta charset="utf-8">
6    <title>Progate</title>
7    <link rel="stylesheet" href="stylesheet.css">
8  </head>
9  <body>
10    <!-- ここからHTMLを書き始めてください -->
11    <div class="header">
12      <div class="header-logo">Progate</div>
13      <div class="header-list">
14        <ul>
15          <li>プログラミングとは</li>
16          <li>学べるレッスン</li>
17          <li>お問い合わせ</li>
18        </ul>
19      </div>
20    </div>
21    
22    <div class="main">
23      <div class="copy-container">
24        <h1>HELLO WORLD<span>.</span></h1>
25        <h2>プログラミングの世界へようこそ</h2>
26      </div>
27      
28      <div class="contents">
29        <h3 class="section-title">学べるレッスン</h3>
30        <div class="contents-item">
31          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
32          <p>HTML & CSS</p>
33        </div>
34        <div class="contents-item">
35          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
36          <p>PHP</p>
37        </div>
38        <div class="contents-item">
39          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
40          <p>Ruby</p>
41        </div>
42        <div class="contents-item">
43          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
44          <p>Swift</p>
45        </div>
46      </div>
47    </div>
48  </body>
49</html>

css
1コード
2/* CSSのリセット（消さないでください） */
3html, body,
4ul, ol, li,
5h1, h2, h3, h4, h5, h6, p,
6form, input, div {
7  margin: 0;
8  padding: 0;
9}
10
11li {
12  list-style: none;
13}
14
15/* ここからCSSを記述してください */
16body {
17  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
18}
19
20.header {
21  background-color: #26d0c9;
22  color: #fff;
23  height: 90px;
24}
25
26.header-logo {
27  float: left;
28  font-size: 36px;
29  padding: 20px 40px;
30}
31
32.header-list {
33  float: left;
34}
35
36.header-list li {
37  float: left;
38  padding: 33px 20px;
39}
40
41.main {
42  padding: 100px 80px;
43}
44
45.copy-container h1 {
46  font-size: 140px;
47}
48
49.copy-container h2 {
50  font-size: 60px;
51}
52
53.copy-container span {
54  color: #ff4a4a;
55}
56
57.contents {
58  height: 500px;
59  margin-top: 100px;
60}
61
62.section-title {
63  border-bottom: 2px solid #dee7ec;
64  font-size: 28px;
65  padding-bottom: 15px;
66  margin-bottom: 50px;
67}
68
69.contents-item {
70  float: left;
71  margin-right: 40px;
72}
73
74.contents-item p {
75  font-size: 24px;
76  margin-top: 30px;
77}

Progateでの学習中です。
上の画像のようにずれてしまいます。
どうしてでしょうか
class名以外はすべてあっているはずです。
初心者で非常に申し訳ないのですが理由を教えて下さるとありがたいです。
よろしくお願いします。

yukikp

2019/08/06 21:27

【サイズを変えてしまったから見にくい】のではなく、CSSやHTMLをコードブロックの中にテキストで書いてくれないから見にくいです。また、3枚目の画像を見ての何のサイズが変わっていることに【着目したいのか】全く分かりません。

yoshinavi

2019/08/06 22:03

＞サイズを変えてしまった＞サイズが変わってしまいます。 →　サイズを変えたのなら、変わって良いのでは？何が問題なのでしょうか？

m.ts10806

2019/08/07 01:22

コードは画像ではなくテキストベースでマークダウンを用いてご提示ください。でないと誰も再現確認できません。

todo293

2019/08/07 09:03

直しました指摘ありがとうございました

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

回答1件

ベストアンサー

progate は回答のコードどおりにコーディングすれば問題なく正解になるようになっています。
正解にならない、ということは必ずあなたのコードが間違っています。

コードはマークダウンを使って質問文に貼りましょうね。

パットみたところ、 margin と padding がごっちゃになっています。
意味を理解してないようにみえます。

もう一度よく確認して下さい。

投稿2019/08/07 00:08

azuapricot

総合スコア2341

todo293

2019/08/07 05:27

回答ありがとうございます。もう一度よく確認してみます。ついでに申し訳ないのですが、borderの指定されてない時などはmarginとpaddingどちらを使えばいいのですか？

azuapricot

2019/08/07 05:35

「borderの指定されてない時」おっしゃってる意味がよくわかりませんが・・・。そもそもpadding と marginの違いについては理解されていますか？今どちらを使えばよいというのはコードを見てないからわかりませんし、 progateが何を求めていたかはもう忘れました。（やったのはだいぶ前なので）詳しい回答が欲しい場合はコードをマークダウンを使って質問文に追記するのをおすすめします（まぁprogateなら回答あるけど・・・）

todo293

2019/08/07 09:05

paddingはboderの内側のサイズでmarginはborderの外側のサイズだと認識していますが違いますか？

azuapricot

2019/08/07 09:19

borderというよりはブロック単位で考えたほうがいいような・・・ borderが指定されていなくてもpaddingもmarginも使えますし・・・ progateって確かデベロッパーツール使えた気がするんですけど、 F12を押すとどうなっているか見比べるといいかもしれませんね。どのCSSがどの高さを変えているのかとか少しはわかりやすくなるはずです

todo293

2019/08/07 10:04

非常にしつこくて申し訳ないのですがその使い分けはどのようにやるのですか？それともどっちを使えと指定されるものなのでしょうか？軽く説明していただけるとありがたいです。

azuapricot

2019/08/08 00:03

使い分けとはpaddingとmarginの使い分けですか？多分下記サイトがわかりやすいんじゃないでしょうか。 https://proengineer.internous.co.jp/content/columnfeature/3953 どちらも単なる余白というわけじゃないので、きちんとHTMLをブロック単位で見れるようになれば、ブロック内部に余白をつけたいのか、ブロック外部との余白をつけたいのかなど分かるようになりますよ。

azuapricot

2019/08/08 00:05

あと指定されるわけではないというか・・・感覚というか・・・ progateの場合、明確に答えが決まってしまっていますが、実際に業務に出てコーディングするのは自分ですし、正解は自分しか知りません。 codepen っていうサイトとかなら自由にコーディングできるので、自分でpadding と marginを使い分けて色々作ってみたら良いのではないでしょうか。

todo293

2019/08/09 15:58

遅れてすみません感覚を培うのにはたくさんやるしかないんですね。色んな事に挑戦してきます。長くしつこいアドバイスにもお付き合いしていただきありがとうございましたまた、何かありましたらよろしくお願いします。

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