HTMLのdivの正しい使い方を教えてください

現在dotinstallでHTMLとCSSを勉強していますが、divを用いて画像と文字を左揃えにする課題で止まってしまいました。
CSSにこの文章を入れても、divがあると適用されないと書いてあったんですけど、結果を見ると適用されてしまっているようです。
section{
text-align: center;
}

後、そのせいか下記のコードを入力しても文字が画像に合った長さになってくれません
.works {
width: 400px;
}
sectionを外すと左揃えにはなるんですが文字が画像に合ってくれません。回答よろしくお願いします

　　　　　<div class="works">
<section>
<img src="img/work1.png"width="400" height="260"alt="勇者ゲーム">
<h1>勇者ゲーム</h1>
<p>楽しいアプリです。楽しいアプリです楽しいアプリです。楽しいア
プリです。楽しいアプリです。楽しいアプリです。楽しいアプリです楽しいアプリです。楽しいア
プリです。楽しいアプリです。</p>
</section>

        <section>
        <img src="img/work2.png"width="400" height="260"alt="宝探しゲーム">
          <h1>宝探しゲーム</h1>
          <p>楽しいアプリです。楽しいアプリです楽しいアプリです。楽しいア
            プリです。楽しいアプリです。楽しいアプリです。楽しいアプリです楽しいアプリです。楽しいア
              プリです。楽しいアプリです。
          </p>
          </section>

          <section>
            <img src="img/work3.png"width="400" height="260"alt="神経衰弱">
            <h1>神経衰弱</h1>
            <p>楽しいアプリです。楽しいアプリです楽しいアプリです。楽しいア
              プリです。楽しいアプリです。楽しいアプリです。楽しいアプリです楽しいアプリです。楽しいア
                プリです。楽しいアプリです。</p>
            </section>
              </div>

raputorujp

2019/06/19 22:33 編集

変更

miyabi_pudding

2019/06/20 00:52

結局、何がしたいんでしょうか？タイトルの要件と質問本文の要件の整合性もとれておりません。 divの正しい使い方、であれば、どちらかというと、セマンティクス的な意味になります。（どういう意味がありどういう場面で使うべきなのかということ）また、文字が画像に合ってくれないというのも、それだけだと訳がわかりません。理想とする画面と、現状の、キャプチャなど頂けると、より正確な回答を得られるかと。それと、コードは、コードブロックで書きましょう。 <code>ボタンで、出すことができます。

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

回答4件

サイトに書いてあったから適用されないはずなのに適用されてしまって分からないではなく、どうして適用されたか考えてみるべきでしょう。
これから先、分からないことばかりで調べることばかりです。この度にネットに書いてあるのにこの通りにならないでは成長しません。
今回の問題を根本的に理解するためには、HTMLの要素の特徴とCSSのdisplayについて調べるといいです！
頑張りましょう！

投稿2019/06/19 23:08