スマホだけレイアウトが崩れる

前提・実現したいこと

HPを作成したのですが、PCで開くと正常に表示されるのですが、スマホで開くと画像が下記のように２つ表示されるなどレイアウトが崩れます。
原因を調べているのですが、どこに問題があるのか分かっていない状況です。
ご教示いただけると幸いです

サイトurl petforhealthsouzou.com

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-VLQ0TPBTKF"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-VLQ0TPBTKF');
</script>
        <meta charset="utf-8">
        <title>Delievery Friend/配達パートナーの交流サイト</title>
        <link rel="stylesheet" href="index.css">
    </head>

    <body>

<div class="parallax-bg img01"><header class="page-header wrapper">
    <h1><img class="logo" src="img/logo (4).png"</h1><p>一人じゃない<br>配達仲間がいるから</p>
</header></div>
<div class="parallax-bg img02">雨の日も<br>風の日も<br>晴れの日も<br>笑いあえる最高の仲間を<br>作ろう<br><br><a class="button" href="https://forms.gle/7z4Y6j5jeLAHz4qb7">掲示板に投稿</a></div>





<div id="uber" class="bg">
   

    <div class="main-content wrapper">
        <h2 class="home-title">Uber仲間掲示板</h2>
        <p>まだ投稿はありません。たくさん投稿してください！
        </p>
        <a class="button" href="https://forms.gle/7z4Y6j5jeLAHz4qb7">投稿</a>
    </div>
</div>


<div id="Walt" class="bg">
   

    <div class="main-content wrapper">
        <h2 class="home-title">Walt仲間掲示板</h2>
        <p>まだ投稿はありません。たくさん投稿してください！
        </p>
        <a class="button" href="https://forms.gle/7z4Y6j5jeLAHz4qb7">投稿</a>
    </div>
</div>

<div id="panda" class="bg">
   

    <div class="main-content wrapper">
        <h2 class="home-title">foodpanda仲間掲示板</h2>
        <p>まだ投稿はありません。たくさん投稿してください！
        </p>
        <a class="button" href="https://forms.gle/7z4Y6j5jeLAHz4qb7">投稿</a>
    </div>
</div>

<div id="menu" class="bg">
   

    <div class="main-content wrapper">
        <h2 class="home-title">menu仲間掲示板</h2>
        <p>まだ投稿はありません。たくさん投稿してください！
        </p>
        <a class="button" href="https://forms.gle/7z4Y6j5jeLAHz4qb7">投稿</a>
    </div>
</div>



    </body>
</html>```

body,
html {
  height: 100%;
  margin: 0 auto;
  letter-spacing: 2px;
  font-size: 10px;
}
 

div {
  box-sizing: border-box;
  color: #FFF;
  font-size: 2rem;

  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 5%;
  font-family: 'Sawarabi Mincho', sans-serif;
}
}
.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.img01 {
  background-image: url('img/courier-driver-4886839_1920.jpg');
}
.img02 {
  background-image: url('img/4015113_m.jpg');
  background-position: center;
}



.button {
    font-size: 1.25rem;
    background: #0bd;
    color: #fff;
    border-radius: 5px;
    padding: 19px 32px;
}

.button:hover {
    background: #0090aa;
}

#uber {
background-color: black; 
  
}

#Walt {
    background-color: skyblue;
}

#panda {
    background-color: rgb(250, 134, 153);
}

#menu {
    background-color: red;
}