Progate 道場 footerのサイズを合わせたいです。

Progateの「HTML & CSS 道場コース　初級編」の「フッターを作ろう」についてです。

フッター作成前までは送信ボタンの位置がずれることはなかったのですが、作成後何故かずれてしまい、フッターの下の長さも足りなくなってしまいます。

答えと照らし合わせても大きく変わっている部分が見つからなかったため、解決法がわかりません。
どのようにすれば帳尻があうのでしょうか。

以下、自分が書いたコードです。HTMLとCSSで記述しています。
初心者であるため、読みにくいコードになっているかもしれませんが、ご容赦ください。

追記：　実際の画像を追記させていただきます。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="stylesheet.css">
7  <title>道場１</title>
8</head>
9<body>
10  <header>
11    <div class="container">
12      <div class="logo">Progate</div>
13      <ul>
14        <li>プログラミングとは</li>
15        <li>学べるレッスン</li>
16        <li>お問い合わせ</li>
17      </ul>
18    </div>
19  </header>
20  <div class="contents">
21  <div class="copy">
22    <h1>HELLO WORLD<span>.</span></h1>
23    <h2>プログラミングの世界にようこそ</h2>
24  </div>
25<div class="lessons">
26    <h3>学べるレッスン</h3>
27    <ul>
28      <li class="lesson">
29        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg" >
30        <p>HTML & CSS</p>
31      </li>
32      <li class="lesson">
33        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg" >
34        <p>
35          PHP
36        </p>
37      </li>
38      <li class="lesson">
39        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg" >
40        <p>
41          Ruby
42        </p>
43      </li>
44      <li class="lesson">
45        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg" >
46        <p>
47          Swift
48        </p>
49      </li>
50    </ul>
51  </div> 
52  <div class="contact">
53    <h3>お問い合わせ</h3>
54    <div class="input">
55    <p>メールアドレス（必須）</p>
56    <input type="text" class="form">
57    <p>お問い合わせ内容（必須）</p>
58    <textarea class="form"></textarea>
59    <p>※必須項目は必ずご記入ください</p>
60    <input type="submit" class="form btn" value="送信" >
61    </div>
62
63  </div>
64  </div>
65<footer>
66    <div class="footer-logo">Progate</div>
67    <ul>
68      <li>会社概要</li>
69      <li>採用</li>
70      <li>お問い合わせ</li>
71    </ul>
72</footer>
73  
74</body>
75
76</html>

CSS
1html, body,
2ul, ol, li,
3h1, h2, h3, h4, h5, h6, p,
4form, input, div {
5  margin: 0;
6  padding: 0;
7}
8body {
9  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
10}
11
12li {
13  list-style: none;
14}
15
16header{
17  background-color:#26d0c9;
18  height: 90px;
19  color:white;
20}
21header li{
22  float:left;
23  padding:33px 20px;
24}
25.logo{
26  font-size: 36px;
27  padding:20px 40px;
28  float: left;
29  
30}
31h1{
32  font-size: 140px;
33}
34h2{
35  font-size: 60px;
36}
37span{
38  color: red;
39}
40.contents{
41  padding: 100px 80px;
42}
43h3{
44  font-size: 28px;
45  border-bottom: solid 2px #dee7de;
46  padding-bottom: 15px;
47}
48.lessons li {
49  float: left;
50  padding-top: 50px;
51  display: inline-block;
52}
53.lessons h3{
54  padding-top:100px;
55}
56.lesson{
57  padding-right: 40px;
58  height: 500px;
59}
60.lesson p{
61  font-size: 24px;
62  padding-top: 30px;
63}
64.lessons{
65  display:inline-block;
66}
67.contact p{
68  padding-bottom: 10px;
69}
70.form{
71  padding: 20px;
72  margin-bottom: 30px;
73  width: 400px;
74  border: solid 1px #dee7de;
75}
76.input{
77  display: inline-block;
78  padding-top: 50px;
79  
80}
81.btn {
82  font-size: 18px;
83  display: inline-block;
84  color: #889eab;
85  background-color: #dee7de;
86}
87footer{
88  background-color: #2f5167;
89  height: 120px;
90  padding: 40px;
91  color:white;
92}
93.footer-logo{
94  font-size: 32px;
95  float: left;
96}
97footer ul{
98  float: right;
99}
100footer li{
101  padding-bottom: 20px;
102}

答えのコード

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    <!-- ここからHTMLを書き始めてください -->
10    <div class="header">
11      <div class="header-logo">Progate</div>
12      <div class="header-list">
13        <ul>
14          <li>プログラミングとは</li>
15          <li>学べるレッスン</li>
16          <li>お問い合わせ</li>
17        </ul>
18      </div>
19    </div>
20
21    <div class="main">
22      <div class="copy-container">
23        <h1>HELLO WORLD<span>.</span></h1>
24        <h2>プログラミングの世界へようこそ</h2>
25      </div>
26
27      <div class="contents">
28        <h3 class="section-title">学べるレッスン</h3>
29        <div class="contents-item">
30          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
31          <p>HTML & CSS</p>
32        </div>
33        <div class="contents-item">
34          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
35          <p>PHP</p>
36        </div>
37        <div class="contents-item">
38          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
39          <p>Ruby</p>
40        </div>
41        <div class="contents-item">
42          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
43          <p>Swift</p>
44        </div>
45      </div>
46
47      <div class="contact-form">
48        <h3 class="section-title">お問い合わせ</h3>
49        <p>メールアドレス（必須）</p>
50        <input>
51        <p>お問い合わせ内容（必須）</p>
52        <textarea></textarea>
53        <p>※必須項目は必ずご入力ください</p>
54        <input class="contact-submit" type="submit" value="送信">
55      </div>
56    </div>
57  </body>
58</html>

CSS
1html, body,
2ul, ol, li,
3h1, h2, h3, h4, h5, h6, p,
4form, input, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
11}
12
13li {
14  list-style: none;
15}
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}
77
78.contact-form {
79  padding-top: 100px;
80}
81
82input, textarea {
83  width: 400px;
84  margin-top: 10px;
85  margin-bottom: 30px;
86  padding: 20px;
87  font-size: 18px;
88  border: 1px solid #dee7ec;
89}
90
91.contact-submit {
92  background-color: #dee7ec;
93  color: #889eab;
94}