完成品のように、marginをもたらしたい

前提・実現したいこと

完成品のように、marginを作りたいですが、原因がわからないです

ご教授いただけると幸いです。

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

room-item３つめとfooterがかぶってしまう

試したこと・考えたこと

hightを狭く設定していたかと考えましたが、そうではなかったです。
margin-bottomを設定しても、変わらなかったです
原因が分からず、質問しました

該当のソースコード

HTML
1  <main class="main">
2       
3        <div class="inner">
4            <section class="bread">
5                <div class="bread-inner">
6                    <div>
7                    <ol class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
8                        <li itemprop=”itemListElement” itemscope itemtype=”https://schema.org/ListItem” class="bread-item"> 
9                            <a itemprop="item" href="index.html"> 
10                                <span itemprop="name">トップ</span>
11                            </a> 
12                            <meta itemprop="position" content="1" />
13                        </li><!-- /.bread-item -->
14                        <li itemprop=”itemListElement” itemscope itemtype=”https://schema.org/ListItem” class="bread-item">
15                            <a itemprop="item" href="room.html">
16                                <span itemprop="name">部屋</span>
17                            </a>
18                            <meta itemprop="position" content="2" />
19                        </li><!-- /.bread-item -->
20                    </ol><!-- /.breadcrumbs -->
21                </div>
22                </div><!-- /.bread-inner -->
23            </section><!-- /.bread -->
24
25            <div class="message">
26              <p>創業より受け継がれてきた石井花壇の和の造り <br> 温海の雄大な絶景を堪能していただけるように設計された客室 <br> ゆるやかに流れ行く時間に身を委ねて</p>  
27            </div><!-- /.message -->
28            <section class="room-contents">
29                <div class="contents-inner">
30                    
31                    <ul class="room-list">
32                        <!-- 1 -->
33                        <li class="room-item">
34                            <div class="room-item-img room-contents-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
35                                <img src="../Room/img/oheya01.jpg" alt="お部屋1">
36                            </div>
37                            <div class="room-contents-txt room-contents-txt-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
38                                <div class="jp-text">
39                                    <p class="ttl">温泉付き客室</p><!-- /.ttl -->
40                                    <p class="desc1">温海の源泉かけ流し露天風呂付き客室になります。<br> あなただけの上質な安らぎのひとときを。</p>
41                                    <p class="desc2">＊部屋数に限りがございます。<br> ＊洗い場はないため、お体を先に大浴場でお流しになって頂く必要があります。</p>
42                                </div><!-- /.jp-text -->
43                            </div><!-- /.room-contents-right -->
44                        </li><!-- /.room-item -->
45                        <!-- 2 -->
46                        <li class="room-item">
47                            <div class="room-item-img room-contents-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
48                                <img src="../Room/img/oheya02.jpg" alt="お部屋1"> 
49                            </div>
50                            <div class="room-contents-txt room-contents-txt-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
51                                <div class="jp-text">
52                                    <p class="ttl">庭園付き客室</p><!-- /.ttl -->
53                                    <p class="desc1">庭園付きの客室になります。<br> お庭を見ながら、ほっとするひとときをお過ごしください。</p>
54                                    <p class="desc2">＊お庭は複数のお客様と囲む形になります。<br> ＊部屋数に限りがあります。<br> ＊ご希望の方は「お抹茶/500円」をルームサービスさせていただきます。</p>
55                                </div><!-- /.jp-text -->
56                            </div><!-- /.room-contents-right -->
57                        </li><!-- /.room-item -->
58                       
59                        <!-- 3 -->
60                        <li class="room-item">
61                            <div class="room-item-img room-contents-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
62                                <img src="../Room/img/oheya03.jpg" alt="お部屋3">
63                            </div><!-- /.room-item-img -->
64                            <div class="jp-text room-contents-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
65                                <p class="ttl">一般客室</p><!-- /.ttl -->
66                                <p class="desc1">最もベーシックな客室になります。 伝統の中にモダンさを取り入れた <br> 内装となっており、とても過ごしやすくしていただけます。</p>
67                                <p class="desc2">＊全室お部屋より日本海を望むことができます。</p>
68                            </div><!-- /.jp-text -->
69                        </li><!-- /.room-item -->
70                    </ul><!-- /.room-list -->
71                </div><!-- /.contents-inner -->
72                </section><!-- /.room-contents -->
73            
74        </div><!-- /.inner -->
75
76    </main><!-- /.main -->
77

CSS
1
2.contents-inner {
3  padding: 0px 40px;
4}
5
6@media screen and (min-width: 600px) and (max-width: 1179px) {
7  .contents-inner {
8    padding: 0px 25px;
9  }
10}
11
12@media screen and (max-width: 599px) {
13  .contents-inner {
14    padding: 0px 15px;
15  }
16}
17
18.room-list {
19  padding: 0px 40px;
20}
21
22@media screen and (min-width: 600px) and (max-width: 1179px) {
23  .room-list {
24    padding: 0px 25px;
25  }
26}
27
28@media screen and (max-width: 599px) {
29  .room-list {
30    padding: 0px 15px;
31  }
32}
33
34.room-list .room-item {
35  position: relative;
36}
37
38.room-list .room-item .room-item-img {
39  position: absolute;
40  top: -57px;
41  margin-left: -60px;
42  height: 300px;
43  width: 525px;
44  z-index: 2;
45}
46
47@media screen and (min-width: 600px) and (max-width: 1179px) {
48  .room-list .room-item .room-item-img {
49    position: absolute;
50    top: -175px;
51    height: 300px;
52    width: 525px;
53  }
54}
55
56.room-list .room-item .room-contents-txt {
57  background-image: url(../../img/bg.png);
58  background-position: center;
59  background-size: cover;
60  z-index: 1;
61  height: 381px;
62  width: 70%;
63  padding-top: 60px;
64  padding-left: 180px;
65  margin-top: 135px;
66  margin-left: auto;
67}
68
69@media screen and (min-width: 600px) and (max-width: 1179px) {
70  .room-list .room-item .room-contents-txt {
71    height: 381px;
72    padding-top: 160px;
73    margin-top: 250px;
74    width: 95%;
75  }
76}
77
78.room-list .room-item .room-contents-txt-right {
79  margin-left: auto;
80  padding-right: 65px;
81}
82
83@media screen and (min-width: 600px) and (max-width: 1179px) {
84  .room-list .room-item .room-contents-txt-right {
85    padding-right: 65px;
86    margin-left: auto;
87  }
88}
89
90.room-list .room-contents-left {
91  left: 0;
92}
93
94.room-list .room-contents-right {
95  right: 0;
96}
97
98.room-list .jp-text {
99  margin-left: auto;
100}