Webページの型崩れの防止

現在ProgateでHTML&CSSの学習をしています。

初級編のお問い合せフォームを自分でもVScodeを使い救ってみたのですがタブの大きさを小さくした時に画像のようにお問い合せの部分がおかしな位置にきてしまいます。
いくつかのサイトで形が崩れるのを防ぐ方法を調べたものの、終了タグがないなど欲しいと思っている情報を見つける事ができませんでした。
この形崩れ直し、レイアウト(?)をちゃんとさせる方法を教えて欲しいです。
イメージはタブを小さくしても二枚目の画像のようなレイアウトが維持される感じです。

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>MyPage</title>
</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 class="image-vw" 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 class="image-vw" 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 class="image-vw" src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
             <p>Ruby</p>
            </div>
            <div class="contents-item">
                <img class="image-vw" src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
                <p>Swift</p>
            </div>
        </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 class="footer">
        <div class="footer-logo">Progate</div>
        <div class="footer-list">
          <ul>
            <li>会社概要</li>
            <li>採用</li>
            <li>お問い合わせ</li>
          </ul>
        </div>
    </div>
</body>
</html>

CSS
body{
    font-family: Avenue;
}

li{
    list-style: none;
}

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

/* 画面幅の50%の幅で画像を表示 */
.image-vw {
    width: 100%;
    height: auto;  
}

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

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

.main{
    padding: 100px 80px;
}

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

.copy-container span{
    color: red;
}

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

.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: #000508;
}

.footer{
    background-color: #2f5167;
    color: #fff;
    height: 120px;
    padding: 40px;
}

.footer-logo{
    float: left;
    font-size: 32px;
}

.footer-list{
    float: right;
}

.footer-list li{
    padding-bottom: 20px;
}