Progate 初級編のお問い合わせフォームについて

Progate 初級編のお問い合わせフォーム部分を作成しているのですが、ここでのpaddingとmarginの使い分けが理解できません。
contact-formのcssはpadding-top:100pxが正解となるのですが、なぜmargin-top:100pxではダメなのでしょうか？
margin-top:100pxで入力するとプレビューではちゃんと表示されますが、次に進もうとするとエラーになってしまいます。
どなたかご教授いただけますと幸いです。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Progate</title>
6    <link rel="stylesheet" href="stylesheet.css">
7  </head>
8  <body>
9    <div class="header">
10      <div class="header-logo">Progate</div>
11      <div class="header-list">
12        <ul>
13          <li>プログラミングとは</li>
14          <li>学べるレッスン</li>
15          <li>お問い合わせ</li>
16        </ul>
17      </div>
18    </div>
19
20    <div class="main">
21      <div class="copy-container">
22        <h1>HELLO WORLD<span>.</span></h1>
23        <h2>プログラミングの世界へようこそ</h2>
24      </div>
25      
26      <div class="contents">
27        <h3 class="section-title">学べるレッスン</h3>
28        <div class="contents-item">
29          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
30          <p>HTML & CSS</p>
31        </div>
32        <div class="contents-item">
33          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
34          <p>PHP</p>
35        </div>
36        <div class="contents-item">
37          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
38          <p>Ruby</p>
39        </div>
40        <div class="contents-item">
41          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
42          <p>Swift</p>
43        </div>
44      </div>
45      
46      <div class="contact-form">
47        <!-- <h3>要素を追加し、「section-title」というclassをつけてください -->
48        <h3 class="section-title">お問い合わせ</h3>
49        
50        <!-- <p>要素を3つ追加してください -->
51        <p>メールアドレス（必須）</p>
52        <p>お問い合わせ内容（必須）</p>
53        <p>※必須項目は必ずご入力ください</p>
54        
55      </div>
56    </div>
57
58    <div class="footer">
59      <div class="footer-logo">Progate</div>
60      <div class="footer-list">
61        <ul>
62          <li>会社概要</li>
63          <li>採用</li>
64          <li>お問い合わせ</li>
65        </ul>
66      </div>
67    </div>
68  </body>
69</html>

css
1body {
2  font-family: "Avenir Next";
3}
4
5li {
6  list-style: none;
7}
8
9.header {
10  background-color: #26d0c9;
11  color: #fff;
12  height: 90px;
13}
14
15.header-logo {
16  float: left;
17  font-size: 36px;
18  padding: 20px 40px;
19}
20
21.header-list li {
22  float: left;
23  padding: 33px 20px;
24}
25
26.main {
27  padding: 100px 80px;
28}
29
30.copy-container h1 {
31  font-size: 140px;
32}
33
34.copy-container h2 {
35  font-size: 60px;
36}
37
38.copy-container span {
39  color: #ff4a4a;
40}
41
42.contents {
43  height: 500px;
44  margin-top: 100px;
45}
46
47.section-title {
48  border-bottom: 2px solid #dee7ec;
49  font-size: 28px;
50  padding-bottom: 15px;
51  margin-bottom: 50px;
52}
53
54.contents-item {
55  float: left;
56  margin-right: 40px;
57}
58
59.contents-item p {
60  font-size: 24px;
61  margin-top: 30px;
62}
63
64/* contact-formのpadding-topを100pxにしてください */
65.contact-form {
66  padding-top: 100px;
67}
68
69.footer {
70  background-color: #2f5167;
71  color: #fff;
72  height: 120px;
73  padding: 40px;
74}
75
76.footer-logo {
77  float: left;
78  font-size: 32px;
79}
80
81.footer-list {
82  float: right;
83}
84
85.footer-list li {
86  padding-bottom: 20px;
87}
88