ウィンドウサイズを変えたときの中央揃え

Question

画面サイズを変えたときに左寄せを中央にもっていきたい。

初心者です。
１枚目のように幅の大きいウィンドウから
幅を狭くしたときに、図中のContent1、Content2を
HEADの中央にもっていきたいです。

@mediaを使ってもできなかったので、ご教示ください。

<div class="wrapper">
  <div class="container">
    <div class="head">
      <h2>HEAD</h2>
      <p>説明文：AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
    </div>
    <div class="contents">
      <div class="content">
        <h3>Content1</h3>
        <p>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>
      </div>
      <div class="content">
        <h3>Content2</h3>
        <p>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</p>
      </div>
    </div>
  </div>
</div>

.head{
  margin: 0 auto;
  padding:50px 0 75px 0;
}


.container{
  max-width:1170px;
  width:auto;
  margin-right:auto;
  margin-left:auto;
}

.head h2{
  padding-bottom:25px;
  font-size:38px;
  text-align: center;
}

.head p{
  font-size:18px;
  text-align:center;
}

.contents{
  padding-bottom:90px;
}

.content{
  float:left;
  margin:0 auto;
  width:500px;
  padding-bottom:90px;
}


.content h3{
  padding-bottom:30px;
  font-size:26px;
  text-align:center;
}

.content p{
  font-size:15px;
  text-align: center;
}

Comments

[m.ts10806]

固定値多すぎて調整難しいように思います。
それぞれどういう意図で入れてるんでしょう。

[seed0503]

固定値が多いというのはwidth等を入れすぎているという認識でよろしいでしょうか。
まだ、理解ができていない部分もあり、最初の画像を実現するために調整しながら、やりました。
（初心者マーク入れるの忘れています。ご容赦ください）

[m.ts10806]

>（初心者マーク入れるの忘れています。ご容赦ください）
質問は編集できるので、後付けすれば良いかと思います。

[seed0503]

アドバイスありがとうございます。

[Jon_do]

見た感じ@mediaを使えばできそうです。
>　画面サイズを変えたとき
とありますが何px以下の時でしょうか？
@mediaを使って出来なかった時のコードも含めて質問に追記するのをオススメします。

[seed0503]

1170px以下のときです。
アドバイスありがとうございます。

Answer 1

@mediaで対応できました。
clear:both;を加えて、text-alignまたはmargin:0 autoで中央に揃えることができました。