レスポンシブデザイン　でスマホ　とタブレット端末向けの見栄えが右に空白が出来てしまう

レスポンシブデザインのレイアウトの練習をしています。

下記がhtml

<header></header>
<main>
<div class="wrapper">
<div class="container">
  <div class="section-title-container">
    <h2 class="section-title">
      ABOUT
    </h2><!-- /.section-title -->
  </div><!-- /.section-title-container -->
  <div class="about-item">
    <figure>画像</figure>
  <div class="about-text-container">
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div><!-- /.about-text-container -->
</div><!-- /.about-item -->
<div class="about-item row-reverse">
  <figure>画像</figure>
<div class="about-text-container">
  <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div><!-- /.about-text-container -->
</div><!-- /.about-item -->
  </div><!-- /.container -->
</div><!-- /.wrapper -->

</main>

CSS が下記です

   * {
  outline: 2px solid blue;
  background:lightblue;
}

/*PC・共通 */



.section-title{
  text-align:center;
}
figure{
  max-width:100%;
  width:100%;
  height:auto;
}

.wrapper {
max-width: 800px;
width:100%;
margin: 0 auto;
padding: 0 4%;
}
.container{
  margin:0 auto;
}
.about-item  {
  display:flex;
  margin-bottom:20px;
}
.row-reverse{
  flex-direction:row-reverse;
}
/*タブレット*/
@media (max-width:1000px){
  p{font-size:16px;}
  .about-item{
    width:50%;
     margin-bottom:20px;
  }
  .container{
  text-align:center;
}
  figure{
    width:100%;
  }
}
/*スマホ*/
@media (max-width:600px){
  p{font-size:12px;}
  .about-item{
    width:100%;
    flex-direction:column;
    margin-bottom:30px;
  }
  .container{
  margin:0 auto;
}
  figure{
    width:100%;
  }
}

タブレットと　スマホの右側に大きな空白が出来てしまいます。
どう適応すれば最適化できるのでしょうか？

wrapper と　container を中央寄せしても　うまくいかなかったです。

スマホとタブレットの最適化は　もっと別にあるのかもと思っていますが。。

行動規範の内容に同意します

回答1件

ベストアンサー

下記のコメントをつけた行で幅を半分しているので、残り半分が余白になっています。
これを削除すれば余白はなくなります。

css
1/*タブレット*/
2@media (max-width:1000px){
3  p{font-size:16px;}
4  .about-item{
5    width:50%; /* ←こご */
6     margin-bottom:20px;
7  }
8  .container{
9  text-align:center;
10}
11  figure{
12    width:100%;
13  }
14}