ProgateのHTML　道場コース中級編についてご質問

前提・実現したいこと

ProgateのHTML　道場コースの中級編でつまづいています。
判定を依頼した際に、エラ〜メッセージに指定されている箇所が

</body> </html> となっている箇所で、回答例と比較してもエラー原因がわかりません。

どなたかご教授お願い致します。

79,80行目周辺が間違っています。

該当のソースコード

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  <!-- ここでFont Awesomeを読み込んでください -->
8  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9</head>
10<body>
11  <!-- ここにコードを書いていきましょう -->
12
13<header>
14  <div class="container">
15    <div class="header-left">
16      <img src="https://prog-8.com/images/html/advanced/main_logo.png" class="logo">
17    </div>
18    <div class="header-right">
19      <a href="#">ログイン</a>
20    </div>
21  </div>
22</header>
23 
24
25  <div class="top-wrapper">
26    <div class="container">
27        <h1>LEARN TO CODE</h1>
28        <h1>LEARN TO BE CREATIVE.</h1>
29        <p>Progateはオンラインプログラミング学習サービスです。</p>
30        <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
31     <div class="btn-wrapper">
32        <a href="#" class="btn signup">新規登録はこちら</a>
33        <p>or</p>
34         <a href="#" class="btn facebook">
35           <span class="fa fa-facebook"></span>
36           Facebookで登録
37         </a>
38         <a href="#" class="btn twitter">
39            <span class="fa fa-twitter"></span>
40            twitterで登録
41          </a>
42      </div>
43    </div>
44  </div>
45 
46  <div class="lesson-wrapper">
47   <div class="container">
48     <h2>Learn Where to Get Started!</h2>
49     <div class="lesson">
50       <div class="lesson-icon">
51         <img src="https://prog-8.com/images/html/advanced/html.png">
52         <h3>HTML & CSS</h3>
53       </div>
54         <p class="lesson-info">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
55     </div>
56     <div class="lesson">
57       <div class="lesson-icon">
58         <img src="https://prog-8.com/images/html/advanced/jQuery.png">
59         <h3>jQuery</h3>
60       </div>
61         <p class="lesson-info">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
62     </div>
63     <div class="lesson">
64       <div class="lesson-icon">
65        <img src="https://prog-8.com/images/html/advanced/ruby.png">
66        <h3>Ruby</h3>
67       </div>
68        <p class="lesson-info">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
69     </div>
70     <div class="lesson">
71       <div class="lesson-icon">
72       <img src="https://prog-8.com/images/html/advanced/php.png">        
73        <h3>PHP</h3>
74        </div>
75        <p class="lesson-info">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
76   </div>
77  </div>
78  
79</body>
80</html>

CSS
1/* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17a {
18  text-decoration: none;
19}
20
21/* ここからCSSを書いていきましょう */
22
23
24
25.container{
26  width:1170px;
27  margin:0 auto;
28}
29
30.top-wrapper h1{
31  color:white;
32  opacity:0.7;
33  font-size:45px;
34  letter-spacing:5px;
35}
36
37.top-wrapper p{
38  color:white;
39  opacity:0.7;
40}
41
42.top-wrapper{
43  padding:180px 0 100px 0;
44  text-align:center;
45  background-image:url(https://prog-8.com/images/html/advanced/top.png);
46  background-size:cover;
47  
48}
49
50.btn-wrapper{
51  margin-top:30px;
52  text-align:center;  
53}
54
55.btn{
56  display:inline-block;
57  color:white;
58  padding:8px 24px;
59  border-radius:4px;
60}
61
62.btn-wrapper p{
63  color:white;
64}
65
66.signup{
67  margin-bottom:15px;
68  background-color:#239b76;
69  opacity:0.8;
70}
71
72.facebook{
73  margin-top:15px;
74  margin-right:10px;
75  background-color:#3b5998;
76  opacity:0.8;
77}
78
79.twitter{
80  margin-top:15px;
81  background-color:#55acee;
82  opacity:0.8;
83}
84
85header{
86  height:65px;
87  width:100%;
88  background-color:rgba(34,49,52,0.9);
89  position:fixed;
90  top:0;
91  z-index:10;
92}
93
94.logo{
95  width:124px;
96}
97
98.header-left img{
99  float:left;
100  margin:20px 0;
101}
102
103.header-right a{
104  float:right;
105  background-color:rgba(255,255,255,0.3);
106  line-height:65px;
107  padding:0 25px;
108  color:white;
109  display:block;
110}
111
112.lesson-wrapper h2{
113  font-weight:normal;
114  padding:80px 0 50px 0;
115  color:#5f5d60;
116  text-align:center;
117}
118
119
120.lesson-wrapper{
121  height:580px;
122  background-color:#f7f7f7;
123}
124
125.lesson{
126  width:25%;
127  float:left;
128  text-align:center;
129}
130
131.lesson-info{
132  width:80%;
133}
134
135.lesson-icon{
136  position:relative;
137}
138
139.lesson-icon h3{
140  position:absolute;
141  top:90px;
142  width:100%;
143  color:white;
144}
145
146.lesson-info{
147  text-align:center;
148  color:#b3aeb5;
149  font-size:13px;
150
151}

試したこと

divの閉じミスがないかなどは確認
回答例とのコードの見比べを行いましたが、指摘されている範囲付近の間違いがわかりませんでした。

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

Google Chromeを使っています。

退会済みユーザー

2020/04/21 13:58

https://validator.w3.org/nu/#textarea

m.ts10806

2020/04/21 14:05

（質問は編集できます）プロゲート使ったことないですが、中級とやらって本件だけではないですよね？いくつかある課題の１つだと見受けられます。としたら、タイトルこれでは汎用的すぎます。タイトルには要件を書くことが望ましいとされます。全ての人がプロゲートを利用するわけでもないし、回答のためだけに入会する人もおそらくいません。「起きている問題」「実現したい機能や課題」をそのまま書きましょう。 https://teratail.com/help/question-tips#questionTips3-1

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

回答1件

ベストアンサー

構文チェック通してみました。

だ、そうです。

それなりのコード量になってくると目検で見つけるのは困難です。
構文チェック機能のあるエディタを利用しましょう。

投稿2020/04/21 14:01

m.ts10806

総合スコア80875

m.ts10806

2020/04/21 14:03

たぶんGoogleChromeでも「ソースを表示」とかで見てみると赤色で警告してくれそうに思います（デベロッパツールでは補正されるのでダメです）

Gee_eeN

2020/04/21 14:04

ありがとうございます！構文チェックをしてくれる機能があるのですね！今後の参考にさせていただきます！ご指摘ありがとうございました！

m.ts10806

2020/04/21 14:07

>構文チェックをしてくれる機能があるのですね！いえ、私が紹介したのは「構文チェックしてくれるWebサービス」と「構文チェック機能がついたエディタを使いましょう」です。プロゲート知らないですが、これまで見てきた感じだとWeb上で入力して正解コードと比較でOKNGが出るんですよね。構文チェックくらいなら別途自身のローカル上でやっても問題ないはずなので、何かしら別の機能で構文チェックを済ませておきましょうという意味です。大抵そういう機能は実行しなくても自動でチェックしてくれます（IDEが望ましいけど、HTML、CSS、JavaScript程度ならBracketsとかでも十分）

m.ts10806

2020/04/21 14:08

タイトルは修正しておいてください。何かで削除されない限りずっと残り続けるので

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