プロパティの有効範囲が知りたい

Question

前提・実現したいこと

プログラミング初学者でProgateのHTML&CSSコースを受講しております。（これが初めてのプログラミング言語学習）
「Progate＞HTML&CSS道場コース上級編＞2.トップ部分をレスポンシブル対応させよう！」にトライしています。
”該当のソースコード”の下記を左揃え

<h1>LEARN TO CODE.</h1>
        <h1>LEARN TO BE CREATIVE.</h1>
        <p>Progateはオンラインプログラミング学習サービスです。</p>
        <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>

下記を中央揃え　にしたいです。

<p>or</p>

解答は下記となっています。（CSS3）

  .top-wrapper {
    text-align: left;
  }

この解答だと、top-wrapperクラスの孫要素であるbtn-wrapperクラスの段落である<p>or</p>に対してもtext-align: left;が有効に機能してしまうという私の認識です。
つまりは、あるクラスに対してプロパティを設定すると、そのクラスに包含されるすべての要素（子、孫、ひ孫、…）に設定したプロパティが機能するという認識なのですが、この認識はどう間違っているのでしょうか。
ご解説をお願い致します。

該当のソースコード

    <div class="top-wrapper">
      <div class="container">
        <h1>LEARN TO CODE.</h1>
        <h1>LEARN TO BE CREATIVE.</h1>
        <p>Progateはオンラインプログラミング学習サービスです。</p>
        <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
        <div class="btn-wrapper">
          <a href="#" class="btn signup">新規登録はこちら</a>
          <p>or</p>
          <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
          <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
        </div>
      </div>
    </div>

Comments

[maisumakun]

・スタイルは、実際にはどうなったのですか？
・CSSは自分で書いたものしか適用しないのでしょうか？それとも、自分で書く分とは別に適用してあるCSSが存在する状況でしょうか？

[yunyanN040]

・スタイルは、実際にはどうなったのですか？
→実現したいことの通り、左揃えにしたい部分が左揃え、中央揃えにしたい部分が中央揃えになりました。
・CSSは自分で書いたものしか適用しないのでしょうか？それとも、自分で書く分とは別に適用してあるCSSが存在する状況でしょうか？
→質問の意図を汲めているか自信がないのですが、質問に書いた .top-wrapper {
text-align: left;
}以外にもCSSの記載があります。

[maisumakun]

> 質問に書いた .top-wrapper {
text-align: left;
}以外にもCSSの記載があります。

そちらを提示してください。

[yunyanN040]

問題の前提として、PC/タブレット/モバイル端末でレスポンシブ対応させるという課題です。
まず、投稿した質問はモバイル端末の場合の仕様についてです。
まず、端末に関係ない共通部分のCSSを記載します。
.top-wrapper {
padding: 180px 0 100px 0;
background-image: url(https://prog-8.com/images/html/advanced/top.png);
background-size: cover;
color: white;
text-align: center;
}

.top-wrapper h1 {
opacity: 0.7;
font-size: 45px;
letter-spacing: 5px;
}

.top-wrapper p {
opacity: 0.7;
}

.btn-wrapper {
text-align: center;
margin: 20px 0;
}

.btn-wrapper p {
margin: 10px 0;
}

.signup {
background-color: #239b76;
}

.facebook {
background-color: #3b5998;
margin-right: 10px;
}

.twitter {
background-color: #55acee;
}

.btn {
padding: 8px 24px;
color: white;
display: inline-block;
opacity: 0.8;
border-radius: 4px;
text-align: center;
}

.btn:hover {
opacity: 1;
}

.fa {
margin-right: 5px;
}

次に、モバイル端末のときのCSSを記載します。
/* モバイル向けレイアウト */
@media all and (max-width: 670px) {
.header-right {
display: none;
}
.menu-icon {
display: block;
}
.top-wrapper .btn {
width: 100%;
}
.facebook {
margin-bottom: 10px;
}
.top-wrapper h1 {
font-size: 24px;
}
.top-wrapper p {
font-size: 14px;
}

}

追加でご要望あればお願いします。
よろしくお願いいたします。

[yunyanN040]

申し訳ございません、同様の質問投稿があり、そちらを確認したところ解決しました。

[maisumakun]

> 申し訳ございません、同様の質問投稿があり、そちらを確認したところ解決しました。

解決されて何よりです。自己解決にまとめておきましょう。

[yunyanN040]

ご対応いただき本当にありがとうございました。今回がteratail初利用だったため利用方法がわかっておらず、お手間をお掛け致しました。次回は他者の質問をしっかり確認した上で質問投稿させていただきます。

Answer 1

同様の質問があり、そちらを確認したところ解決しました。
https://teratail.com/questions/184250?link=qa_related_pc