CSS 高さが違うエラーが出ます。

前提・実現したいこと

progateでCSS,HTMLの練習をしています。
作成したものを見ると、高さが違うとエラーが出ます。
HTMLは問題なく、問題があるとすればCSSの方かと思います。
paddingやmarginは確認ずみですが、どこでミスをしているのでしょうか。

教えて頂けますと幸いです。

発生している問題・エラーメッセージ

全体の高さが1171pxになっています。答え(1801px)と比較してみてください。

該当のソースコード

以下、自分で書いたコードです。

.header{            
background-color: #26d0c9;              
height: 90px;            
color: #fff;            
}            

.header-logo {            
padding: 20px 40px;            
float: left;            
font-size: 36px;            
}            
                                 
.header-list li{            
padding: 33px 20px;            
float:left;            
}            
                                 
.main {            
padding: 100px 80px;            
}            

.copy-container h1{            
font-size: 140px;            
}            
                                 
.copy-container span{            
color: #ff4a4a;            
}            
                                 
.copy-container h2{            
font-size: 60px;            
}            
                                 
.contents {            
margin-top: 100px;            
height: 500px;            
}            
                                 
.section-title {            
font-size: 28px;            
padding-bottom: 15px;            
border-bottom: 2px  solid #dee7ec;            
margin-bottom: 50px;            
}            
                                 
.contents-item {            
float:left;            
margin-right: 40px;            
}            
                    
.contents-item p{            
font-size: 24px;            
margin-top: 30px;            
}            
                                 
.contact-form {            
padding-top: 100px;            
}            
                                 
input, textarea{            
padding: 20px;            
font-size: 18px;            
margin-top: 10px;                        
margin-bottom: 30px;             
border: 1px solid #dee7ec;            
width: 400px;            
}   
         
.contact-submit{            
color: #889eab;            
background-color: #dee7ec;            
}

試したこと

・CSS,HTMLの答えと自分のコードの比較
・paddingとmarginの確認

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

答え

.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;
}

.header-list li {
float: left;
padding: 33px 20px;
}

.main {
padding: 100px 80px;
}

.copy-container h1 {
font-size: 140px;
}

.copy-container h2 {
font-size: 60px;
}

.copy-container span {
color: #ff4a4a;
}

.contents {
height: 500px;
margin-top: 100px;
}

.section-title {
border-bottom: 2px solid #dee7ec;
font-size: 28px;
padding-bottom: 15px;
margin-bottom: 50px;
}

.contents-item {
float: left;
margin-right: 40px;
}

.contents-item p {
font-size: 24px;
margin-top: 30px;
}

.contact-form {
padding-top: 100px;
}

input, textarea {
width: 400px;
margin-top: 10px;
margin-bottom: 30px;
padding: 20px;
font-size: 18px;
border: 1px solid #dee7ec;
}

.contact-submit {
background-color: #dee7ec;
color: #889eab;
}

Lhankor_Mhy

2021/09/28 01:10

HTMLをご提示ください。

youcai

2021/10/01 12:52

以下が自分で書いたコードです。 <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body>  <div class="header"> <div class="header-logo">Progate</div> <div class="header-list"> <ul> <li>プログラミングとは</li> <li>学べるレッスン</li> <li>お問い合わせ</li> </ul> </div> </div> <div class="main"> <div class="copy-container"> <h1>HELLO WORLD<span>.</span></h1> <h2>プログラミングの世界へようこそ</h2> </div> <div class="contents"> <h3 class="section-title">学べるレッスン</h3> <div class="contents-item"> <img src="https://prog-8.com/shared/images/lesson/html/study/html.svg"> <p>HTML & CSS</p> </div> <div class="contents-item"> <img src="https://prog-8.com/shared/images/lesson/html/study/php.svg"> <p>PHP</p> </div> <div class="contents-item"> <img src="https://prog-8.com/shared/images/lesson/html/study/ruby.svg"> <p>Ruby</p> </div> <div class="contents-item"> <img src="https://prog-8.com/shared/images/lesson/html/study/swift.svg"> <p>Swift</p> </div> <div class="contact-form"> <h3 class="section-title">お問い合わせ</h3> <p>メールアドレス（必須）</p> <input> <p>お問い合わせ内容（必須）</p> <textarea></textarea> <p>※必要項目は必ずご記入ください</p> <input class="contact-submit" type="submit" value="送信"> </div> </div> </div> </body> </html>

youcai

2021/10/01 12:53

以下　答えになります。 <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body>  <div class="header"> <div class="header-logo">Progate</div> <div class="header-list"> <ul> <li>プログラミングとは</li> <li>学べるレッスン</li> <li>お問い合わせ</li> </ul> </div> </div> <div class="main"> <div class="copy-container"> <h1>HELLO WORLD<span>.</span></h1> <h2>プログラミングの世界へようこそ</h2> </div> <div class="contents"> <h3 class="section-title">学べるレッスン</h3> <div class="contents-item"> <img src="https://prog-8.com/shared/images/lesson/html/study/html.svg"> <p>HTML & CSS</p> </div> <div class="contents-item"> <img src="https://prog-8.com/shared/images/lesson/html/study/php.svg"> <p>PHP</p> </div> <div class="contents-item"> <img src="https://prog-8.com/shared/images/lesson/html/study/ruby.svg"> <p>Ruby</p> </div> <div class="contents-item"> <img src="https://prog-8.com/shared/images/lesson/html/study/swift.svg"> <p>Swift</p> </div> </div> <div class="contact-form"> <h3 class="section-title">お問い合わせ</h3> <p>メールアドレス（必須）</p> <input> <p>お問い合わせ内容（必須）</p> <textarea></textarea> <p>※必須項目は必ずご入力ください</p> <input class="contact-submit" type="submit" value="送信"> </div> </div> </body> </html>

Lhankor_Mhy

2021/10/02 01:03

HTMLの方に明らかに違いがあると思います。

youcai

2021/10/02 03:43

</div>の位置がずれていたようです。修正したら突破できました。 HTMLがズレるとCSSが合っていてもいけないのですね、勉強になりました。ありがとうございます。もっと頑張ります。

Lhankor_Mhy

2021/10/02 03:44

ご解決されて何よりです。お手数ですが、自己解決の処理をお願いします。