Progate HTML & CSS 道場初級編コンテンツを作ろう中間部分のmarginについて

ウェブサイトの真ん中部分 index.html の <div class="contents">

<h3 class="section-title">学べるレッスン</h3>以下、仕様書の『学べるレッスン』以下(『お問い合わせ』より上)の箇所についての質問です。 ![イメージ説明](e0b3fdc680cce664c3f97474a989208b.png)

答えの方のCSS の .contens には、margin-top:100px の記述があります。
それを自分でCSSに書くと、配置バランスが大きく下がります。
100px分下がるようです。
同じく、答えの方のCSSの.contensには、margin-left:80; がなくても、左から 80px分あきます。

答えの方の CSS .cotents には、margin-bottom:100 を記述しなくても、

<p>HTML＆CSS等の4つのp要素の下のスペース(margin)が詰まりません。自分のコードだと、margin-left:80; や margin-bottom:100;を記述しないと、見本(仕様書)と同じになりません。なぜでしょうか？

該当のソースコード

HTML
1 <div class="main">
2      <div class="copy-container">
3        <h1>HELLO WORLD<span>.</span></h1>
4        <h2>プログラミングの世界へようこそ</h2>
5      </div>
6      
7      <div class="contents">
8        <h3 class="section-title">学べるレッスン</h3>
9        <div class="contents-item">
10          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
11          <p>HTML & CSS</p>
12        </div>
13        <div class="contents-item">
14          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
15          <p>PHP</p>
16        </div>
17        <div class="contents-item">
18          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
19          <p>Ruby</p>
20        </div>
21        <div class="contents-item">
22          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
23          <p>Swift</p>
24        </div>
25      </div>
26    </div>
27  </body>
28</html>
29

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
11body {
12  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
13}
14
15li {
16  list-style: none;
17}
18
19/* ここからCSSを記述してください */
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}

試したこと

ここに問題に対して試したことを記載してください。

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

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

前提・実現したいこと

ここに質問の内容を詳しく書いてください。

ウェブサイトの真ん中部分 html の <div class="contents">以下、学べるレッスン以下の箇所の質問です。
1.
答えの方のCSS の contens には、margin-top:100px がありますが、
それを自分でCSSに書くと、配置バランスが大きく下がります。
100px分下がるようです。
同じく、答えの方のCSSの.contensには、margin-left:80; がなくても、左から 80px分あきます。

答えの方の cotents には、margin-bottom:100 を記述しなくても、

<p>HTML＆CSS等の4つのp要素の下のスペース(margin)が詰まりません。 ![イメージ説明](e5013b3e8dd3ef89f47d2b2b0e8b1407.png)

自分のコードだと、margin-left:80; や margin-bottom:100;を記述しないと、見本(仕様書)と同じになりません。
なぜでしょうか？

エラーメッセージ

該当のソースコード

HTML
1 <div class="main">
2      <div class="copy-container">
3        <h1>HELLO WORLD<span>.</span></h1>
4        <h2>プログラミングの世界へようこそ</h2>
5      </div>
6      
7      <div class="contents">
8        <h3 class="section-title">学べるレッスン</h3>
9        <div class="contents-item">
10          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
11          <p>HTML & CSS</p>
12        </div>
13        <div class="contents-item">
14          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
15          <p>PHP</p>
16        </div>
17        <div class="contents-item">
18          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
19          <p>Ruby</p>
20        </div>
21        <div class="contents-item">
22          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
23          <p>Swift</p>
24        </div>
25      </div>
26    </div>
27  </body>
28</html>
29

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

試したこと

.contents {}内に、margin-top:100; margin-left: 80; を書いたり消したりした。
.contens-item{}内に、margin-bottom:100; を書いたり消したりした。

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

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

前提・実現したいこと

ここに質問の内容を詳しく書いてください。

答えの方の cotents には、margin-bottom:100 を記述しなくても、

<p>HTML＆CSS等の4つのp要素の下のスペース(margin)が詰まりません。 ![イメージ説明](e5013b3e8dd3ef89f47d2b2b0e8b1407.png)

自分のコードだと、margin-left:80; や margin-bottom:100;を記述しないと、見本(仕様書)と同じになりません。
なぜでしょうか？

エラーメッセージ

該当のソースコード

HTML
1 <div class="main">
2      <div class="copy-container">
3        <h1>HELLO WORLD<span>.</span></h1>
4        <h2>プログラミングの世界へようこそ</h2>
5      </div>
6      
7      <div class="contents">
8        <h3 class="section-title">学べるレッスン</h3>
9        <div class="contents-item">
10          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
11          <p>HTML & CSS</p>
12        </div>
13        <div class="contents-item">
14          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
15          <p>PHP</p>
16        </div>
17        <div class="contents-item">
18          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
19          <p>Ruby</p>
20        </div>
21        <div class="contents-item">
22          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
23          <p>Swift</p>
24        </div>
25      </div>
26    </div>
27  </body>
28</html>
29

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

試したこと

CSSの→
.contents {}内に、margin-top:100; margin-left: 80; を書いたり消したりした。
.contens-item{}内に、margin-bottom:100; を書いたり消したりした。

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

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

退会済みユーザー

2020/08/13 14:02

コードが見にくいので、コードをを書く専用の欄を作って、そこに書いたほうがいいと思います。

wankoromochi

2020/08/13 15:00 編集

提言、ありがとうございます。コード専用欄は、<code>(コードの挿入)から作るのでしょうか？質問は再編集は、そもそもできますか？新たに質問するカタチになるのかな？ ↑ 解決しました。提案の趣旨は、こんな感じでしたでしょうか？

退会済みユーザー

2020/08/14 05:45

その通りです！

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

回答2件

左が80px空かないってことは下記のCSSが効いてないように思います
見直してみてはいかがでしょう

CSS
1.main {
2  padding: 100px 80px;
3}

投稿2020/08/24 04:21

jinba

総合スコア310

umesiba5

2020/10/29 14:11

こんにちは、自分も今同じ問題を抱えています。もし、何が問題であったのか分かったのであればお教えください。よろしくお願いします。

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

.contents {
  margin: 100px 80px;
  height: 500px;
}

投稿2020/08/14 12:59

編集2020/08/14 13:00

nasuk47

総合スコア311

wankoromochi

2020/08/17 06:07

回答、ありがとう。上記のコードを試しました。ですが、やはり、『学べるレッスン』(<h3 class="section-title">学べるレッスン</h3>)箇所が、見本(仕様書)よりも下へ下がります。多分、100px分。判定では、『残念... 全体の高さが1920pxになっています。答え(1801px)と比較してみてください。』と出ました。