縮小の際に全体が左に寄ってしまいます。

前提・実現したいこと

画面を縮小していくと、Bodyが左に小さく寄ってしまいます。真ん中寄席で画面に合わせて可変させるにはどうすればいいですか？なぜかilだけは真ん中に表示されました。

該当のソースコード


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profile</title>
  <!-- <meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキスト"> -->
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" href="image/favicon.ico">
</head>

<body>
  <div class="inner">
    <header class="wrapper">
      <h1 class="site-title">
        <a href="#"><img src="image/logo.svg" alt="Profile"></a>
      </h1> 
      <nav>
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#bicycle">Bicycle</a></li>
        </ul>
      </nav>
    </header>
  </div>

  <div class="mainvi">
    <img src="image/mainvisual.jpg" alt="テキストテキストテキスト">
  </div>
  
  <main>
    <div class="inner">
    <section id="about" class="wrapper">
      <h2 class="heading">
        About
      </h2>
      <div class="content">
        <img src="image/about.jpg" alt="テキストテキストテキスト">
        <div class="min">
          <h3>
            KAKERU MIYAICHI
          </h3>
          <p>テキストテキストテキストテキストテキストテキストテキスト<br>
            テキストテキストテキストテキストテキストテキストテキスト<br>
            テキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
    </section>

    <section id="bicycle" class="wrapper">
      <h2 class="heading">
        Bicycle
      </h2>
      <ul>
        <li>
          <img src="image/bicycle1.jpg" alt="テキストテキストテキスト">
          <h3>タイトルタイトル</h3>
          <p>テキストテキストテキスト</p>
        </li><li>
          <img src="image/bicycle2.jpg" alt="テキストテキストテキスト">
          <h3>タイトルタイトル</h3>
          <p>テキストテキストテキスト</p>
        </li><li>
          <img src="image/bicycle3.jpg" alt="テキストテキストテキスト">
          <h3>タイトルタイトル</h3>
          <p>テキストテキストテキスト</p>
        </li>
      </ul>
      
    </section>  
  </div>
  </main>

  <footer>
    <p>© 2020 Profile </p>
  </footer>

  </body>
  </html>



@charset "UTF-8";
img{
  max-width: 100%;
}
.inner{
  padding: 0 6%;
}
body{
  width: 100%;
}
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 4%;
.site-title{
  width: 120px;
  padding: 10px 0;
  line-height: 1px;
  a{
    display: block;
    // height: 40px;
  }
}
nav{
  ul{
    list-style: none;
    display: flex;
    li{
      padding-left: 21px;
      a{
        text-decoration: none;
        color: #24292E;
      }
    }
  }
}
}
.mainvi{
  margin-bottom: 80px;
  img{
  height: 600px;
  max-width: 1960px;
  object-fit: cover;
  width: 100%;
  }
}
.heading{
  font-size: 32px;
  border-bottom: 1px solid #383E45;
  margin-bottom: 60px;
  display: inline-block;
}
#about{
  text-align: center;
  margin-bottom: 100px;
  width: 100%;
  // margin: 0 auto;padding: 0 6%;
.content{
  display: flex;
  align-items: center;
  justify-content: center;
  img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    // display: block;
    margin-right: 30px;
  }
  .min{
    text-align-last: left;
  }
}
}
#bicycle{
  text-align: center;
  margin-bottom: 110px;
  ul{
    display: flex;
    justify-content: space-between;
    width: 800px;
    margin: 0 auto;
    list-style: none;
    li{
      width: 262px;
      a{
      img{
      }
    }
    }
  }
}
footer{
  text-align: center;
}

@media screen and (max-width: 600px) {
  .mainvi{
    height: calc(100vh - 60px);
  }
  .content{
    flex-direction: column;
  }
  #bicycle{
    ul{
      flex-direction: column;
      li{
        width: 100%;
      }
    }
  }
}