スマホ版レスポンシブルがおかしくなる

PC版レイアウトは完成してスマホ版を検証で見ようとしたら、
上記の写真のようになります。

私はjQueryライブラリのdrewer.jsと言うライブラリを使用しました。
https://haniwaman.com/drawer-js/　
この記事を参考に導入して、
ドロワーは動きますが、余計な余白が出てレイアウト崩れをしています。
ここに原因がある気がするんですが全くわからず、
スマホ版のcssにはwidth100%や
max-width100%などにしたんですがこの状態で、どうしたら
青い部分が全体表示されますか。
よろしくお願いします。仕事内容までのhtml,cssを記載します。

html

<body class="drawer drawer--right"> <header role="banner">  <button type="button" class="drawer-toggle drawer-hamburger" id="hum"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button>  <nav class="drawer-nav" role="navigation"> <ul class="drawer-menu"> <li><a class="drawer-brand" href="#TOP">Portfolio</a></li> <li><a class="drawer-menu-item" href="#TOP">TOP</a></li> <li><a class="drawer-menu-item" href="#Whosme">ABOUT</a></li> <li><a class="drawer-menu-item" href="#Works">Works</a></li> <li><a class="drawer-menu-item" href="#portfolio">Portfolio</a></li> <li><a class="drawer-menu-item" href="#Contact">Contact</a></li> </ul> </nav> <div class="text1" id="TOP"> <h1>My Portfolio</h1> <h2>Web Enginner</h2> <a href="#Whosme"> <h3>Who's ME?</h3> </a> </div> </header> <div class="section1" id="Whosme"> <h3>ABOUT</h3> <h1>仕事内容</h1>

<div class="box2">

  <div class="left2">
    <img src="/images/阿部舜平.jpg" alt="プロフィール画像">
  </div>
  <div class="right2">
    <ul>
      <li>・名前 しゅんへい</li>
      <li>・出身 群馬県。3歳の時に北海道に移動</li>
      <li>・市立札幌大通高校卒。<br>
        北星学園大学経営情報学科に進学予定</li>
      <li>エゾシカ問題を広めるためにエゾシカ革製品製作・販売の活動もしています
      </li>
    </ul>

  </div>

css(sass)

body{
a{
text-decoration: none;
}
}
header{
background-image: url(/images/penguinuhh-QRjxIZBH01I-unsplash.jpg);
width: 100%;
height: 500px;
padding-top: 300px;
padding-bottom: 300px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
h1{
color:white;
font-size: 70px;
margin: 10px;
padding-top: 30px;
font-family: 'Lemonada', cursive;
}
h2{
color: white;
font-size: 24px;
font-family: 'Lemonada', cursive;
}
#hum{
background-color: white;
}
.text1{
margin: 0 auto;
text-align: center;
}
button{
color: white;
}
h3{
color: white;
border: 1px solid purple;
background-color: purple;
padding: 20px;
border-radius: 5px;
width: 100px;
margin: 20px auto;
}
}
.section1{
text-align: center;
padding-top: 150px;
padding-bottom: 150px;
h3{
margin: 5px;
color: yellowgreen;
font-size: 14px;
}
h1{
font-size: 42px;
padding-bottom: 80px;
}
.box2{
display: flex;
justify-content: center;
}
.left2{
margin: 10px;
padding-left: 50px;
width: 30%;
}
.left2 img{
width: 250px;
margin: 10px;
border-radius: 150px;
}
.right2{
margin: 10px;
padding-top: 40px;
width: 30%;
}
li{
list-style: none;
text-align: left;
margin: 10px;
font-size: 18px;
width: 80%;
}
h2{
color: white;
border: 1px solid rgb(55, 245, 204);
background-color: rgb(55, 245, 204);
padding: 20px;
border-radius: 5px;
width: 100px;
margin: 10px auto;
}
}
スマホ版css(sass)
@media screen and (max-width:768px) {
/スマホ用のcssを記述/
body{
max-width: 100%;
height: auto;
}
.box2,
.box3,
.box4,
.contact1{
flex-direction: column;
margin: 0 auto;
}
.left2 img{
margin: 0 auto;
width: 100%;
margin-right: 30px;
}
.right2 li{
width: 500px;
margin: 0 auto;
}
.box2{
margin: 0 auto;
padding: 30px;
width: 200%;
}
.box3{
width: 300%;
}
.section1 {
width: 100%;
max-width: 100%;
height: auto;
}
}