margin:0 atuoで要素が真ん中にいかない

Question

margin: 0 auto; で要素が中央にいかないです。
右側に寄ってしまします。

http://spiritualcompany.net/website/test/rensyu.html
のWORKSの下の画像と文字です。

<section class="works">
  <h1>WORKS</h1>
  <section>
    <img src="img/work1.png" alt="work">
    <h1>勇者ゲーム</h1>
    <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。<br>
      楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。
    </p>
  </section>
</section>

.works{
  width: 400px;
  /* margin: 0 auto; */
  margin-left: auto;
  margin-right: auto;
}

.works > h1{
  text-align: center;
}

.works > section > h1{
  font-weight: normal;
}

.works p{
  line-height: 1.8;
}

Comments

[yambejp]

＞　右側に寄ってしまします

左じゃなくて？

[dobashi]

はい。要素全部が右よりです。

Answer 1

画像が.worksの幅を超えて表示されてしまっているので、右側に寄ったように見えているだけだと思います。
画像の最大幅を100%にすると、おそらく意図されている表示になって、中央に配置されているのがわかると思います。

.works img{
　max-width:100%;
}

Comments

[dobashi]

ありがとうございます。max-wdith:100%にしたら、中央揃いになりました。ありがとうございます。
画像が、.worksの幅を超えていたのですね。勉強になります。

Answer 2

質問文のリンク先のページを見てみましたが、「右の方に移動してしまう」ように見えているのは、単に使っている画像(img/work1.png)が大きすぎて、worksクラスの幅(400px)をはみ出しているからでは。

とりあえず、

.works img {
    width: 400px;
}

で、画像の幅を400pxにしてみてください。まだ「右の方に移動してしまう」ように見えますか?

Answer 3

.works > section{
  text-align: center;
}
.works > section>p{
  text-align: left;
}

Comments

[dobashi]

ご回答ありがとうございます。
text-alignではうまくいくのは分かるのですが、
なぜmargin:0 atuoで変なほう（右側）に移動してしまうか知りたいです。