中央寄せができない理由が知りたいです。

Question

前提・実現したいこと

中央寄せがしたいです。

.about-inner .txt　が中央寄せができません。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML

<section id="about">

    <div class="about-inner">

      <h2 class="base-title"><span>ABOUT</span>カフェのこだわり</h2>
      <div class="line"></div>
      </div>
      
     <p class="txt">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト<br>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

      <ul class="column">
        <li>
           <img src="img/about__coffee.jpg" alt="コーヒー豆の写真">
           <h3 class="about-iten-title">豆からのこだわり</h3>
           <p class="text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        </li>
        <li>
           <img src="img/about__pizza.jpg" alt="ピザの写真">
           <h3 class="about-iten-title">石窯で焼いた絶品ピザも人気</h3>
           <p class="text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        </li>
        <li>
         <img src="img/about__cake.jpg" alt="ケーキの写真">
         <h3 class="about-iten-title">食後にデザートはいかが？</h3>
         <p class="text">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
        </li>
      </ul>
    </div>
</section>

---

CSS
.base-title{
color: #74859f;
padding-bottom: 30px;
letter-spacing: 0.3rem;
text-align: center;
}

.base-title span{
font-size: 16px;
display: block;
}

.base-title h2{
font-size: 32px;
}

.line{
width: 20px;
height: 3px;
margin: 18px auto 0;
background-color: #ccc;
}

.about__inner{
width: 1040px;
/* margin: 0 auto; */
}

/* 下記を　.txt 　に変更すると中央寄せができました　*/
.abou-inner .txt {
text-align: center;
font-size: 14px;
line-height:1.5;
padding-bottom: 20px;
}

試したこと

これを
.txt
に変更すると中央寄せができました。

理由がわかりません。

補足情報（FW/ツールのバージョンなど）

勉強を始めたばかりです。
宜しくお願いします。

Comments

[kei344]

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

1: .about-inner内に.txtがないからではないでしょうか？
.about-inner .txtこう書きたい場合は下記のようにしましょう

<div class="about-inner">
  <p class="txt">hogehoge</p>
</div>

もしくは、記載されているCSSが.abou-inner .txtになっています。
tが抜けているせいではないでしょうか？

Comments

[coan]

間違いだらけでした。
有難うございました。

Answer 2

/*  下記を　.txt 　に変更すると中央寄せができました　*/
.abou-inner .txt {
text-align: center;
font-size: 14px;
line-height:1.5;
padding-bottom: 20px;
}

上記の例だと.abou-inner配下の.txtという意味です。
<div class="about-inner">と<p class="txt">が入れ子ではなく同階層にあるためスタイルが適用されていないためです。

Comments

[coan]

間違いだらけでお恥ずかしい。
有難うございました。