セーフエリアが作れない。env(safe-area-inset-bottom);

セーフエリアを作りたい

iPhoneXの画面下のメニューバーが被らないようにセーフエリアを作ろうとしています。
スマホ表示用のページをコーディング中です。
クラス名「os1_d0088」をフッターに固定しています。

env(safe-area-inset-bottom);が効かない

ネットでセーフエリアの作成方法を調べたところ
「env(safe-area-inset-bottom);」と「viewport-fit=cover」を
書き込めばできると書いていたのですが、

Atomエディタで「os1_d0088」のcssに書き込んだところ「env(safe-area-inset-bottom);」が反映されず、
困っています。

該当のソースコード

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 ,viewport-fit=cover" >
    <link rel="stylesheet" href="slick2/slick/slick.css">
    <link rel="stylesheet" href="slick2/slick/slick-theme.css">
    <title></title>

    <style>
     


      .os01_d0088{
        height:100px!important;
        width:100%!important;
        padding-left:40px!important;
        padding-right:40px!important;
        border: 1px solid gray!important;
        z-index: 5!important;
        overflow: hidden!important;
        padding-bottom:100px!important;
        position: fixed !important;
        bottom:0 !important;
        left:0;
        right:0;
        background-color: white!important;
        font-size:14px!important;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
      }

      .os01_d0088 a{
        list-style: none!important;

      }

      .os01_d0088 a .contents{
        display: flex!important;
        border-left:solid 1px gray!important;
        border-right:solid 1px gray!important;
        background: rgb(250,250,250)!important;

      }
      .os01_d0088 a .contents .leftcontent{
        width:30%!important;
        height:100px!important;
        padding:5px!important;
      }
      .os01_d0088 a .contents .leftcontent img{
        max-width: 100%!important;
        height:83%!important;
        margin-top:7px!important;
      }
      .os01_d0088 a .contents .rightcontent{
        position: relative;
        padding:5px!important;
      }
      .os01_d0088 a .contents .rightcontent p{
         max-width: 210px!important;
         overflow: hidden!important;
         text-overflow: ellipsis!important;
         white-space: nowrap!important;
      }
      .os01_d0088 a .contents .rightcontent .rc-one{
        color:black!important;
      }
      .os01_d0088 a .contents .rightcontent .rc-two{
        color:black;
        font-size:0.8rem!important;
      }
      .os01_d0088 a .contents .rightcontent .rc-three{
        position:absolute!important;
        bottom:10px!important;
        color:black!important;
      }
      .os01_d0088 .slide-arrow{
        position: absolute!important;
        width:25px!important;
        z-index: 3!important;
      }

      .os01_d0088 .prev-arrow{
        left:8px!important;
        top:35px!important;
      }
      .os01_d0088 .next-arrow{
        right:8px!important;
        top:35px!important;
      }
      .os01_d0088 .slick-prev{
        left:10px!important;
        z-index: 2!important;
      }



    </style>
  </head>
  <body>
    <h1>d00xxのデザインサンプル</h1>
    <main>

    <div class="ad-space-header">オススメ記事一覧</div>
        <div class="os01_d0088">
          <a href="#">
            <div class="contents">
              <div class="leftcontent">
                <img src="img/flower1.jpeg" alt="">
              </div>
              <div class="rightcontent">
                <p class="rc-one">ラム【ハイクオリティ美尻】</p>
                <p class="rc-two">28歳 T159・83(B)・58・86</p>
                <p class="rc-three">Beppin house</p>
              </div>
            </div>
          </a>

          <a href="#">
            <div class="contents">
              <div class="leftcontent">
                <img src="img/flower1.jpeg" alt="">
              </div>
              <div class="rightcontent">
                <p class="rc-one">ラム【ハイクオリティ美尻】</p>
                <p class="rc-two">28歳 T159・83(B)・58・86</p>
                <p class="rc-three">Beppin house</p>
              </div>
            </div>
          </a>
          <a href="#">
            <div class="contents">
              <div class="leftcontent">
                <img src="img/flower1.jpeg" alt="">
              </div>
              <div class="rightcontent">
                <p class="rc-one">ラム【ハイクオリティ美尻】</p>
                <p class="rc-two">28歳 T159・83(B)・58・86</p>
                <p class="rc-three">Beppin house</p>
              </div>
            </div>
          </a>
          <a href="#">
            <div class="contents">
              <div class="leftcontent">
                <img src="img/flower1.jpeg" alt="">
              </div>
              <div class="rightcontent">
                <p class="rc-one">ラム【ハイクオリティ美尻】</p>
                <p class="rc-two">28歳 T159・83(B)・58・86</p>
                <p class="rc-three">Beppin house</p>
              </div>
            </div>
          </a>
        </div>


 

    </main>

  </body>
</html>