progate:初級　道場　「お問い合わせフォーム」のずれこみ解消&コンテンツ間の余白確保

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
progateの初級道場、お問い合わせフォーム作成に関するものです。
初級道場一周して一度は成功したはずですが、とりあえず見た目だけ問題にはない余白などをいじりながら微調整って感じで通してしまったので、二回目きちんとわかりやすいコードを書くようにしようとしたところどうしてもうまくいきません。

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

①「お問い合わせフォーム」が大きな画面で見ると、コンテンツ部分にきてしまっているが、入り込まないようにして下に持っていきたい。
②「お問い合わせ」と上のコンテンツ間の余白を100pxとりたい。

エラーメッセージ
赤く囲まれたところを見直してみましょう

ソースコード(HTML)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <!-- ここからHTMLを書き始めてください -->
    <!--ここからheader-->
    <header>
      <div class="header-logo">Progate</div>
      <div class="header-list">
        <ul>
          <li>プログラミングとは</li>
           <li>学べるレッスン</li>
            <li>お問い合わせ</li>
        </ul>
      </div>
    </header>
    <!--ここまでheader-->
    
    <!--ここからmain-->
    <div class="message">
      <h1>HELLO WORLD<span>.</span></h1>
      <h2>プログラミングの世界へようこそ</h2>
    </div>
    <!--ここまでmain-->
    
    <!--ここからcontent-->
    <contents clearfix>
      <h3>学べるレッスン</h3>
      <div class="contents-section">
        <div class="contents-item">
        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"><p>HTML & CSS</p>
        </div>
        <div class="contents-item">
        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"><p>PHP</p>
        </div>
        <div class="contents-item">
        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"><p>Ruby</p>
        </div>
        <div class="contents-item" clearfix>
        <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"><p>Swift</p>
        </div>
        </div>
        
       
    
    </contents>
    <!--ここまでcontent-->
    
     <!--ここからform-->
   <div class="contact-form">
     <h3 class="form-title">お問い合わせ</h3>
     
       <p>メールアドレス(必須)</p>
       <input>
       <p>お問い合わせ内容(必須)</p>
       <textarea></textarea>
       <p>※必須項目は必ずご入力ください</p>
      <input type="submit" class="submit" value="送信">
    </div>
     <!--ここまでform-->
     
  </body>
  <!--ここまでbody-->
  <!--ここからfotter-->
  <!--ここまでfotter-->
</html>


### ソースコード(CSS)

/* CSSのリセット（消さないでください） */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}

li {
  list-style: none;
}

/* ここからCSSを記述してください */
/*ここからheader*/
header {
  height:90px;
  background-color:#26d0c9 ;
  color:#fff
}

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

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

/*ここからmain*/
.message {
  margin: 100px 80px;
}

.message h1 {
  font-size:140px;
}

.message h2 {
  font-size:60px;
}

.message span {
  color:#ff4a4a ;
}

/*ここからcontents*/
contents {
  height:500px;
  margin: 5px 80px;
  float:left;
}
contents h3 {
  font-size:28px;
  border-bottom: 2px solid #dee7ec;
  padding-bottom: 15px;
}

.contents-section {
  margin-top: 50px;
  }
.contents-item {
  font-size:24px;
  padding-right: 40px;
  float:left;
}


.clearfix:after {
  contents:"";
  display:block;
  clear:both;
}
/*ここからform*/

.clearfix:after {
  contents:"";
  display:block;
  clear:both;
}

.contact-form {
padding: 100px;
}

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

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

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