【HTML/CSS】１コンテナごとに余白がついてしまう

一つのコンテナごとに余白ができてしまうのですがなぜでしょうか？
このページ全体を一つのクラスで括ってみたのですが上手くいきませんでした。。。
クラスの括り方に問題があるのでしょうか？

ご教示いただけると嬉しいです。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>模写練習</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10<header>
11  <div class="header">
12    <h1>30DAYSトライアル</h1>
13    <nav>
14      <ul>
15        <li>デイトラとは</li>
16        <li>コース一覧</li>
17        <li>お問い合わせ</li>
18      </ul>
19    </nav>
20  </div>
21</header>
22<!--１日１題の構成-->
23<div class="main">
24<div class="main-top">
25    <h2>1日1題30日で<br>プロのwebエンジニアになろう！</h2>
26    <p>毎日設定された課題をこなすだけ！未経験から<br>30日でプログラミングスキルが身につきます</p>
27</div>
28<!--デイトラとはの構成-->
29<div class="main-middle">
30<h3>デイトラとは</h3>
31<div class="main-middle2">
32    <img src="img/about.png" class="img2">
33<p class="txt">デイトラとは、無料で迷わず・楽しく学べるプログラミング学習アプリです。
34    毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。
35    <br>1日1題30日でプロのwebエンジニアを目指しましょう！</p>
36</div>
37</div>
38<!--コース一覧-->
39<div class="main-bottom">
40    <div class="heading">
41    <h3>コース一覧</h3>
42</div>
43<div class="lessons">
44    <div class="lesson">
45        <img src="img/web_first.png" class="lesson-img">
46        <p>HTML / CSS / Bootstrap</p>
47    </div>
48    <div class="lesson">
49        <img src="img/web_second.png" class="lesson-img">
50        <p>HTML / CSS / JavaScript / JQuery</p>
51</div>
52    <div class="lesson">
53        <img src="img/web_third.png" class="lesson-img">
54        <p>PHP / WordPress</p>
55</div>
56
57    </div>
58</div>
59<!--お問い合わせフォームの構成-->
60<div class="message">
61    <h3>お問い合わせ</h3>
62    <p>さあ今日から30日間を始めよう！</p>
63    <div class="message-box">
64        <input class="email" type="email" placeholder="メールアドレス"></div>
65        <div class="submit-btn">
66        <input class="btn" type="submit" value="無料ではじめる"></div>
67    </div>
68<footer>
69    <div class="footer">
70        <p>Copyright(C) 2020 東京フリーランス ALL Rigfts Reserver.</p>
71    </div>
72</footer>
73</div>
74</body>
75
76</html>

CSS
1@charset "utf-8";
2body {
3    font-family: 'Trebuchet';
4    font-weight: bold;
5}
6ul {
7    list-style: none;
8}
9.header {
10    display: flex;
11    height: 60px;
12    align-items: center;
13    background-color: blueviolet;
14}
15.header nav {
16    margin-left: auto;
17    margin-right: 100px;
18}
19.header ul {
20    display: flex;
21}
22.header ul li {
23    margin: 20px;
24    font-size: 14px;
25    font-weight: bold;
26}
27.header h1 {
28    font-size: 24px;
29    margin-left: 120px;
30}
31.main-top {
32    background-image: url("img/main-vsual-nontitle.png");
33    background-size: contain;
34    padding: 80px 0 80px 0;
35    text-align: center;
36}
37.main-top h2 {
38    font-size: 40px;
39}
40.main-middle {
41    background-color: darkgray;
42    height: 550px;
43    width: 100%;
44    padding-top: 15px;
45}
46h3 {
47    text-align: center;
48}
49.img2{
50    width: 43%;
51    float: left;
52    margin-left: auto;
53    padding-left: 11%;
54}
55.txt {
56    width: 30%;
57    float: left;
58    padding-left: 3%;
59    margin-left: auto;
60    font-weight: normal;
61}
62.main-bottom {
63    background-color: darkkhaki;
64}
65.lessons {
66    justify-content: center;
67    display: flex;
68    margin-left: 3%;
69}
70.lesson p {
71    font-weight: normal;
72}
73.lesson-img {
74    width: 90%;
75}
76.message {
77    background-color: darksalmon;
78    text-align: center;
79}
80.message P {
81    font-size: 12px;
82}
83
84.email {
85    width: 400px;
86    height: 30px;
87    border-radius: 18px;
88    border: 2px solid #dee7ec;
89}
90.btn {
91    margin-top: 10px;
92    width: 200px;
93    height: 35px;
94    background-color: red;
95    color: white;
96    font-weight: bold;
97    border: 0px;
98    border-radius: 3px;
99}
100.btn:hover{
101    opacity: 0.5;
102}
103.footer {
104    margin-top: 100px;
105    height: 50px;
106    border-top: 2px solid #dee7ec;
107    font-size: 12px;
108    text-align: right;
109}