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

Question

前提・実現したいこと

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

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

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

試したこと

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

該当のソースコード

      
            <section class="menu-contents">
                <div class="contents-inner">
                <ul class="menu-list">
                    <li class="menu-item">
                  <div class="menu-item-img menu-item-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
                      <img alt="お部屋1" src="../Menu/img/menu01.png">
                  </div>

                    <div class="menu-item-txt menu-item-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
                            <div class="jp-text">
                                <h2 class="ttl">地元食材にこだわった会席料理</h2><!-- /.ttl -->
                                <p class="desc">
                                    みずみずしくほのかに甘い野菜、新鮮で味に深みがある魚介類、肉類。<br class="space">
                                    旬の素材をそのままに生かす、経験に裏打ちされた確かな技。<br class="space">
                                    四季ごと、日ごとに変化する味わいを、どうぞご堪能ください。
                                </p>  
                            </div><!-- /.jp-text -->
                    </div><!-- /.menu-item-right -->
                    </li><!-- /.menu-item -->
                    <!-- 2 -->
                    <li class="menu-item">
                  <div class="menu-item-img menu-item-right-sec aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
                            <img alt="お部屋1" src="../Menu/img/menu02.png">
                        </div>
                        <div class="menu-item-txt menu-item-left-sec aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
                            <div class="jp-text">
                                <h2 class="ttl">熱海の漁港で目利きの品を</h2><!-- /.ttl -->
                                <p class="desc">
                                    石井花壇でお出しする料理はすべて料理長である大将の目利きで、<br class="space">
                                    熱海の魚市場でその日のうちに仕入れたものを使用しております。<br class="space">
                                    日本海の宝玉を十分にお楽しみください。
                                </p>
                               
                            </div><!-- /.jp-text -->
                        </div><!-- /.menu-item-right -->
                    </li><!-- /.menu-item -->
                    <!-- 3 -->
                    <li class="menu-item">
                  <div class="menu-item-img menu-item-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
                      <img alt="料理3" src="../Menu/img/menu03.png">
                    </div><!-- /.menu-item-img -->
                        <div class="menu-item-txt menu-item-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
                            <div class="jp-text">
                                <h2 class="ttl">食材が一流、職人も一流</h2><!-- /.ttl -->
                                <p class="desc">
                                    石井花壇の料理人は料亭で20年経験を積んだものばかり。<br class="space"> 
                                    その時の最も旬な食材を、最高の調理でお届けします。<br class="space">
                                    また、お料理への細かいご要望にもお答えできますので、<br class="space">
                                    お気軽にお申し付けください。
                                </p>
                            </div><!-- /.jp-text -->
                        </div><!-- /.menu-item-txt-right -->
                    </li><!-- /.menu-item -->
                </ul><!-- /.menu-list -->
            </div><!-- /.contents-inner -->
     ```
```CSS

.menu-list {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 80px;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .menu-list {
    margin: 0px 20px;
  }
}

@media screen and (max-width: 599px) {
  .menu-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.menu-item {
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 57px 216px 165px;
  -ms-grid-columns: 367px 158px 655px;
      grid-template: 57px 216px 165px/ 367px 158px 655px;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .menu-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

@media screen and (max-width: 700px) {
  .menu-item {
    display: block;
    position: relative;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

.menu-item:nth-of-type(2) {
  margin: 84px auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 57px 243px 138px;
  -ms-grid-columns: 654px 159px 430px;
      grid-template: 57px 243px 138px/ 654px 159px 430px;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .menu-item:nth-of-type(2) {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

@media screen and (max-width: 599px) {
  .menu-item:nth-of-type(2) {
    display: block;
    position: relative;
  }
}

.menu-item:nth-of-type(3) {
  margin-bottom: 150px;
}

.menu-item-right {
  grid-area: right;
  -ms-grid-column: 2;
  -ms-grid-column-span: 3;
  grid-column: 2 / 5;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-row: 2 / 4;
  padding-left: 150px;
  /* 左余白 */
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .menu-item-right {
    padding-left: 0px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
  }
}

.menu-item-right-sec {
  grid-area: right;
  -ms-grid-column: 2;
  -ms-grid-column-span: 3;
  grid-column: 2 / 5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1 / 3;
  z-index: 9;
}

@media screen and (max-width: 599px) {
  .menu-item-right-sec {
    z-index: -4;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

@media screen and (max-width: 599px) {
  .menu-item-right {
    padding-left: 0px;
  }
}

.menu-item-left {
  grid-area: left;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  grid-row: 1/3;
  z-index: 9;
}

.menu-item-left-sec {
  grid-area: left;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / 3;
  -ms-grid-row: 2;
  -ms-grid-row-span: 2;
  grid-row: 2 / 4;
  z-index: -1;
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .menu-item-left-sec {
    padding-left: 0px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
  }
}

@media screen and (max-width: 599px) {
  .menu-item-left-sec {
    padding-left: 0px;
  }
}

@media screen and (max-width: 599px) {
  .menu-item-left {
    z-index: -4;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

.menu-item-img {
  width: 90%;
  /* 画像サイズ指定 */
}

@media screen and (min-width: 600px) and (max-width: 1179px) {
  .menu-item-img {
    width: 100%;
  }
}

@media screen and (max-width: 599px) {
  .menu-item-img > img {
    opacity: .7;
    display: block;
    widows: 100vw;
  }
}

.menu-item-txt {
  background-image: url(../../../img/bg.png);
  background-position: center;
  background-size: cover;
  z-index: 5;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

@media screen and (max-width: 599px) {
  .menu-item-txt {
    padding-left: 20px;
    background-image: none;
  }
}

.menu-item-txt .jp-text {
  padding-left: 52px;
  /*  grid-area: right;
                grid-column: 3/4;
                grid-row: 2/3; */
}

@media screen and (max-width: 599px) {
  .menu-item-txt .jp-text {
    padding-left: 10px;
    font-weight: bold;
  }
}

.menu-item-txt .jp-text .ttl {
  font-size: 2.4rem;
  padding-top: 60px;
}

@media screen and (max-width: 599px) {
  .menu-item-txt .jp-text .ttl {
    font-size: 2.0rem;
  }
}

.menu-item-txt .jp-text .desc {
  line-height: 1.5;
  padding-top: 52px;
  padding-bottom: 52px;
}

@media screen and (max-width: 599px) {
  .menu-item-txt .jp-text .desc {
    padding: 22px;
    line-height: 1.0;
    font-size: 1.4rem;
    font-weight: lighter;
  }
}

@media screen and (max-width: 599px) {
  .menu-item-txt .jp-text .desc .space {
    display: none;
  }
}

ご教授お願い致します。m( _ _ )m