window<700pxの時、marginが機能しない

前提・実現したいこと

表題の通り、、marginを利かせたいのですが、機能しない

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

表題の通りです。display: inline;でもないため、不思議です

試したこと

margin-top,bottomを聞かせて、余白を持たせたい。
画像のように、これ以上余白ないと、見栄えが悪い。

該当のソースコード

HTML
1
2      
3            <section class="menu-contents">
4                <div class="contents-inner">
5                <ul class="menu-list">
6                    <li class="menu-item">
7                  <div class="menu-item-img menu-item-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
8                      <img alt="お部屋1" src="../Menu/img/menu01.png">
9                  </div>
10
11                    <div class="menu-item-txt menu-item-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
12                            <div class="jp-text">
13                                <h2 class="ttl">地元食材にこだわった会席料理</h2><!-- /.ttl -->
14                                <p class="desc">
15                                    みずみずしくほのかに甘い野菜、新鮮で味に深みがある魚介類、肉類。<br class="space">
16                                    旬の素材をそのままに生かす、経験に裏打ちされた確かな技。<br class="space">
17                                    四季ごと、日ごとに変化する味わいを、どうぞご堪能ください。
18                                </p>  
19                            </div><!-- /.jp-text -->
20                    </div><!-- /.menu-item-right -->
21                    </li><!-- /.menu-item -->
22                    <!-- 2 -->
23                    <li class="menu-item">
24                  <div class="menu-item-img menu-item-right-sec aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
25                            <img alt="お部屋1" src="../Menu/img/menu02.png">
26                        </div>
27                        <div class="menu-item-txt menu-item-left-sec aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
28                            <div class="jp-text">
29                                <h2 class="ttl">熱海の漁港で目利きの品を</h2><!-- /.ttl -->
30                                <p class="desc">
31                                    石井花壇でお出しする料理はすべて料理長である大将の目利きで、<br class="space">
32                                    熱海の魚市場でその日のうちに仕入れたものを使用しております。<br class="space">
33                                    日本海の宝玉を十分にお楽しみください。
34                                </p>
35                               
36                            </div><!-- /.jp-text -->
37                        </div><!-- /.menu-item-right -->
38                    </li><!-- /.menu-item -->
39                    <!-- 3 -->
40                    <li class="menu-item">
41                  <div class="menu-item-img menu-item-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
42                      <img alt="料理3" src="../Menu/img/menu03.png">
43                    </div><!-- /.menu-item-img -->
44                        <div class="menu-item-txt menu-item-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
45                            <div class="jp-text">
46                                <h2 class="ttl">食材が一流、職人も一流</h2><!-- /.ttl -->
47                                <p class="desc">
48                                    石井花壇の料理人は料亭で20年経験を積んだものばかり。<br class="space"> 
49                                    その時の最も旬な食材を、最高の調理でお届けします。<br class="space">
50                                    また、お料理への細かいご要望にもお答えできますので、<br class="space">
51                                    お気軽にお申し付けください。
52                                </p>
53                            </div><!-- /.jp-text -->
54                        </div><!-- /.menu-item-txt-right -->
55                    </li><!-- /.menu-item -->
56                </ul><!-- /.menu-list -->
57            </div><!-- /.contents-inner -->
58     ```
59```CSS
60
61.menu-list {
62  -webkit-box-pack: justify;
63  -webkit-justify-content: space-between;
64      -ms-flex-pack: justify;
65          justify-content: space-between;
66  margin-top: 80px;
67}
68
69@media screen and (min-width: 600px) and (max-width: 1179px) {
70  .menu-list {
71    margin: 0px 20px;
72  }
73}
74
75@media screen and (max-width: 599px) {
76  .menu-list {
77    display: -webkit-box;
78    display: -webkit-flex;
79    display: -ms-flexbox;
80    display: flex;
81    -webkit-box-orient: vertical;
82    -webkit-box-direction: normal;
83    -webkit-flex-direction: column;
84        -ms-flex-direction: column;
85            flex-direction: column;
86    -webkit-box-align: center;
87    -webkit-align-items: center;
88        -ms-flex-align: center;
89            align-items: center;
90  }
91}
92
93.menu-item {
94  width: 100%;
95  display: -ms-grid;
96  display: grid;
97  -ms-grid-rows: 57px 216px 165px;
98  -ms-grid-columns: 367px 158px 655px;
99      grid-template: 57px 216px 165px/ 367px 158px 655px;
100}
101
102@media screen and (min-width: 600px) and (max-width: 1179px) {
103  .menu-item {
104    display: -webkit-box;
105    display: -webkit-flex;
106    display: -ms-flexbox;
107    display: flex;
108    -webkit-box-orient: vertical;
109    -webkit-box-direction: normal;
110    -webkit-flex-direction: column;
111        -ms-flex-direction: column;
112            flex-direction: column;
113  }
114}
115
116@media screen and (max-width: 700px) {
117  .menu-item {
118    display: block;
119    position: relative;
120    margin-top: 30px;
121    margin-bottom: 30px;
122  }
123}
124
125.menu-item:nth-of-type(2) {
126  margin: 84px auto;
127  display: -ms-grid;
128  display: grid;
129  -ms-grid-rows: 57px 243px 138px;
130  -ms-grid-columns: 654px 159px 430px;
131      grid-template: 57px 243px 138px/ 654px 159px 430px;
132}
133
134@media screen and (min-width: 600px) and (max-width: 1179px) {
135  .menu-item:nth-of-type(2) {
136    display: -webkit-box;
137    display: -webkit-flex;
138    display: -ms-flexbox;
139    display: flex;
140    -webkit-box-orient: vertical;
141    -webkit-box-direction: normal;
142    -webkit-flex-direction: column;
143        -ms-flex-direction: column;
144            flex-direction: column;
145  }
146}
147
148@media screen and (max-width: 599px) {
149  .menu-item:nth-of-type(2) {
150    display: block;
151    position: relative;
152  }
153}
154
155.menu-item:nth-of-type(3) {
156  margin-bottom: 150px;
157}
158
159.menu-item-right {
160  grid-area: right;
161  -ms-grid-column: 2;
162  -ms-grid-column-span: 3;
163  grid-column: 2 / 5;
164  -ms-grid-row: 2;
165  -ms-grid-row-span: 2;
166  grid-row: 2 / 4;
167  padding-left: 150px;
168  /* 左余白 */
169}
170
171@media screen and (min-width: 600px) and (max-width: 1179px) {
172  .menu-item-right {
173    padding-left: 0px;
174    margin: 0 auto;
175    text-align: center;
176    width: 100%;
177  }
178}
179
180.menu-item-right-sec {
181  grid-area: right;
182  -ms-grid-column: 2;
183  -ms-grid-column-span: 3;
184  grid-column: 2 / 5;
185  -ms-grid-row: 1;
186  -ms-grid-row-span: 2;
187  grid-row: 1 / 3;
188  z-index: 9;
189}
190
191@media screen and (max-width: 599px) {
192  .menu-item-right-sec {
193    z-index: -4;
194    position: absolute;
195    top: 50%;
196    left: 50%;
197    -webkit-transform: translate(-50%, -50%);
198            transform: translate(-50%, -50%);
199  }
200}
201
202@media screen and (max-width: 599px) {
203  .menu-item-right {
204    padding-left: 0px;
205  }
206}
207
208.menu-item-left {
209  grid-area: left;
210  -ms-grid-column: 1;
211  -ms-grid-column-span: 2;
212  grid-column: 1 / 3;
213  -ms-grid-row: 1;
214  -ms-grid-row-span: 2;
215  grid-row: 1/3;
216  z-index: 9;
217}
218
219.menu-item-left-sec {
220  grid-area: left;
221  -ms-grid-column: 1;
222  -ms-grid-column-span: 2;
223  grid-column: 1 / 3;
224  -ms-grid-row: 2;
225  -ms-grid-row-span: 2;
226  grid-row: 2 / 4;
227  z-index: -1;
228}
229
230@media screen and (min-width: 600px) and (max-width: 1179px) {
231  .menu-item-left-sec {
232    padding-left: 0px;
233    margin: 0 auto;
234    text-align: center;
235    width: 100%;
236  }
237}
238
239@media screen and (max-width: 599px) {
240  .menu-item-left-sec {
241    padding-left: 0px;
242  }
243}
244
245@media screen and (max-width: 599px) {
246  .menu-item-left {
247    z-index: -4;
248    position: absolute;
249    top: 50%;
250    left: 50%;
251    -webkit-transform: translate(-50%, -50%);
252            transform: translate(-50%, -50%);
253  }
254}
255
256.menu-item-img {
257  width: 90%;
258  /* 画像サイズ指定 */
259}
260
261@media screen and (min-width: 600px) and (max-width: 1179px) {
262  .menu-item-img {
263    width: 100%;
264  }
265}
266
267@media screen and (max-width: 599px) {
268  .menu-item-img > img {
269    opacity: .7;
270    display: block;
271    widows: 100vw;
272  }
273}
274
275.menu-item-txt {
276  background-image: url(../../../img/bg.png);
277  background-position: center;
278  background-size: cover;
279  z-index: 5;
280  -webkit-box-flex: 1;
281  -webkit-flex: 1;
282      -ms-flex: 1;
283          flex: 1;
284}
285
286@media screen and (max-width: 599px) {
287  .menu-item-txt {
288    padding-left: 20px;
289    background-image: none;
290  }
291}
292
293.menu-item-txt .jp-text {
294  padding-left: 52px;
295  /*  grid-area: right;
296                grid-column: 3/4;
297                grid-row: 2/3; */
298}
299
300@media screen and (max-width: 599px) {
301  .menu-item-txt .jp-text {
302    padding-left: 10px;
303    font-weight: bold;
304  }
305}
306
307.menu-item-txt .jp-text .ttl {
308  font-size: 2.4rem;
309  padding-top: 60px;
310}
311
312@media screen and (max-width: 599px) {
313  .menu-item-txt .jp-text .ttl {
314    font-size: 2.0rem;
315  }
316}
317
318.menu-item-txt .jp-text .desc {
319  line-height: 1.5;
320  padding-top: 52px;
321  padding-bottom: 52px;
322}
323
324@media screen and (max-width: 599px) {
325  .menu-item-txt .jp-text .desc {
326    padding: 22px;
327    line-height: 1.0;
328    font-size: 1.4rem;
329    font-weight: lighter;
330  }
331}
332
333@media screen and (max-width: 599px) {
334  .menu-item-txt .jp-text .desc .space {
335    display: none;
336  }
337}