bootstrapでコードを書いたところpaddingでもmarginでもない空白ができる。(解決策が正しいかもしりたい)

前提・実現したいこと

.top内のh1と.formの隙間を埋めたい。

自己流ではありますが、.row に対して align-content: flex-start; を設定したことで、
見た目自体は整ったのですが、bootstrap の機能に影響などはありますか？
まだ、初心者なのでコードがバラバラで見づらい部分はあると思いますが、
対象となるhtmlとcssを抜き出しておきました。確認していただけると幸いです。

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

h1 と.form の間に空白ができてしまう。

該当のソースコード

html
1<head>
2  <!-- Required meta tags -->
3  <meta charset="utf-8">
4  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5
6  <!-- Bootstrap CSS -->
7  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
8    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
9  <script src="https://kit.fontawesome.com/74851e5c84.js" crossorigin="anonymous"></script>
10  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
11  <link rel="stylesheet" href="css/test2.css">
12  <title>Test</title>
13</head>
14
15<body>
16  <div class="container-fluid">
17    <div class="top row">
18      <h1 class="col-12 col-md-10 offset-md-1 col-lg-5 offset-lg-6">Airbnbホストになって、暮らしをレベルアップ</h1>
19      <div class="form col-12 col-md-10 offset-md-1 col-lg-5 offset-lg-6">
20        <h2 class="mb-2">宿泊施設の内容を記入</h2>
21        <input class="form-control mb-2" type="text" placeholder="函館市">
22        <div class="form-group">
23          <select id="inputState" class="form-control mb-2">
24            <option selected>まるまる貸切</option>
25            <option>...</option>
26          </select>
27          <select id="inputState" class="form-control mb-2">
28            <option selected>ゲスト4人</option>
29            <option>...</option>
30          </select>
31          <a class="btn  d-block d-lg-inline-block" href="#" role="button">
32            はじめる</a>
33        </div>
34      </div>
35    </div>
36    <!-- Optional JavaScript -->
37    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
38    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
39      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
40      crossorigin="anonymous"></script>
41    <Script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
42      integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
43      crossorigin="anonymous"></script>
44    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
45      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
46      crossorigin="anonymous"></script>
47    <script src="js/main.js" defer></script>
48
49</body>

css
1/* top */
2
3.top {
4  height: 240px;
5  background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.705));
6  background-size: cover;
7  background-position: top;
8}
9
10@media screen and (min-width: 768px) {
11
12  .top {
13    height: 310px;
14   }
15}
16@media screen and (min-width: 992px) {
17  .top {
18    height: 651px;
19    background-position: top 80px left 0px;
20   }
21}
22
23
24
25/* top h1 */
26
27.top h1 {
28  background: rgba(95, 158, 160, 0.493);
29  margin-top: 100px;
30  margin-bottom: 0;
31  padding: 0 20px;
32  border-radius: 5px;
33}
34
35@media screen and (min-width: 768px) {
36  .top h1 {
37    font-style: normal;
38    font-weight: 800;
39    font-size: 40px;
40    line-height: 40px;
41    color: #fff;
42    height: 50px;
43    margin-top: 158px;
44  }
45}
46
47
48@media screen and (min-width: 992px) {
49  .top h1 {
50    height: 135px;
51    padding: 10px;
52    margin-top: 50px;
53  }
54}
55
56/* form */
57
58.form {
59  background: #fff;
60  height: 200px;
61}
62
63.form h2 {
64  font-style: normal;
65  font-weight: 600;
66  font-size: 18px;
67  line-height: 26px;
68  color: #484848;
69}
70
71
72
73.form input {
74  font-style: normal;
75  font-weight: 600;
76  font-size: 14px;
77  line-height: 22px;
78  color: #484848;
79}
80
81.form select{
82  font-style: normal;
83  font-weight: 400;
84  font-size: 14px;
85  line-height: 22px;
86  color: #484848;
87}
88
89@media screen and (max-width: 992px) {
90  .form {
91    margin: 52px auto 0;
92    padding: 0 22px;
93  }
94
95  .form .btn {
96    background-color: #ff5a5f;
97    border-color: #ff5a5f;
98    font-style: normal;
99    font-weight: 800;
100    font-size: 16px;
101    line-height: 24px;
102    color: #fff;
103    height: 50px;
104  }
105}
106
107@media screen and (min-width: 768px) {
108  .form {
109    margin-top: 75px;
110  }
111}
112
113
114@media screen and (min-width: 992px) {
115  .form {
116    margin-top: 11px;
117    height: 259px;
118  }
119
120  .form .btn {
121    width: 100%;
122    background-color: #ff5a5f;
123    border-color: #ff5a5f;
124    font-style: normal;
125    font-weight: 800;
126    font-size: 16px;
127    line-height: 24px;
128    color: #fff;
129  }
130}
131
132