cssの記述が影響を及ぼしている範囲について

HTML&CSSをprogateで学習中です。
道場コース上級の2でtext-align:left;文字を左詰めにするのですがtext-align:left;がどこまで影響するのかがわかりません。
回答のCSSでは.top-wrapper{
text-align:left;
}
となっているのですがこの記述でなぜ<div class="container">の中身は左詰めになるのに<div class="btn-wrapper">の<p>or</P>だけ左詰めにならないのかが理解できません。
説明がわかりにくく申し訳ないのですがわかる方がいらっしゃいましたら教えていただけると幸いです。

恐らく私の考え方が間違っているのですが、
"top-wrapper"の中に"container"がありその中に"btn-wrapper"が入っている。
この状態で"top-wrapper"にtext-align:leftを記述すると中に入っている"container"と"btn-wrapper"に影響すると認識しています。
そのため、"btn-wrapper"の外にある<h1>LEARN TO CODE.</h1>,<h1>LEARN TO BE CREATIVE.</h1>, <p>Progateはオンラインプログラミング学習サービスです。</p>,<p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>のそれぞれにtext-algin:leftを記述するしか方法がないと思っていました。
実際に回答を見ると"top-wrapper"に記述しても中にある"btn-wrapper"の<p>or</p>は左詰めにならなかったため、どこまで左詰めが影響するのかがわからないな、と思い質問させていただきました。

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Progate</title>
7    <link rel="stylesheet" href="stylesheet.css">
8    <link rel="stylesheet" href="responsive.css">
9    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
10  </head>
11  <body>
12    <header>
13      <div class="container">
14        <div class="header-left">
15          <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
16        </div>
17
18        <!-- モバイル用のヘッダーのメニューアイコン -->
19        <span class="fa fa-bars menu-icon"></span>
20
21        <div class="header-right">
22          <a href="#">レッスン</a>
23          <a href="#">新規登録</a>
24          <a href="#" class="login">ログイン</a>
25        </div>
26      </div>
27    </header>
28    <div class="top-wrapper">
29      <div class="container">
30        <h1>LEARN TO CODE.</h1>
31        <h1>LEARN TO BE CREATIVE.</h1>
32        <p>Progateはオンラインプログラミング学習サービスです。</p>
33        <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
34        <div class="btn-wrapper">
35          <a href="#" class="btn signup">新規登録はこちら</a>
36          <p>or</p>
37          <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
38          <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
39        </div>
40      </div>
41    </div>
42    <div class="lesson-wrapper">
43      <div class="container">
44        <div class="heading">
45          <h2>Learn Where to Get Started!</h2>
46        </div>
47        <div class="lessons">
48          <div class="lesson">
49            <div class="lesson-icon">
50              <img src="https://prog-8.com/images/html/advanced/html.png">
51              <p>HTML & CSS</p>
52            </div>
53            <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
54          </div>
55          <div class="lesson">
56            <div class="lesson-icon">
57              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
58              <p>jQuery</p>
59            </div>
60            <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
61          </div>
62          <div class="lesson">
63            <div class="lesson-icon">
64              <img src="https://prog-8.com/images/html/advanced/ruby.png">
65              <p>Ruby</p>
66            </div>
67            <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
68          </div>
69          <div class="lesson">
70            <div class="lesson-icon">
71              <img src="https://prog-8.com/images/html/advanced/php.png">
72              <p>PHP</p>
73            </div>
74            <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
75          </div>
76        </div>
77        
78      </div>
79    </div>
80    <div class="message-wrapper">
81      <div class="container">
82        <div class="heading">
83          <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
84          <h3>Let's learn to code, learn to be creative!</h3>
85        </div>
86        <span class="btn message">さっそく開発する</span>
87      </div>
88    </div>
89    <footer>
90      <div class="container">
91        <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
92        <p>Learn to code, learn to be creative.</p>
93      </div>
94    </footer>
95  </body>
96</html>

CSS
1
2* {
3  box-sizing: border-box;
4}
5
6body {
7  margin: 0;
8  font-family: "Hiragino Kaku Gothic ProN";
9}
10
11a {
12  text-decoration: none;
13}
14
15.container {
16  max-width: 1170px;
17  width: 100%;
18  padding: 0 15px;
19  margin: 0 auto;
20}
21
22.top-wrapper {
23  padding: 180px 0 100px 0;
24  background-image: url(https://prog-8.com/images/html/advanced/top.png);
25  background-size: cover;
26  color: white;
27  text-align: center;
28}
29
30.top-wrapper h1 {
31  opacity: 0.7;
32  font-size: 45px;
33  letter-spacing: 5px;
34}
35
36.top-wrapper p {
37  opacity: 0.7;
38}
39
40.btn-wrapper {
41  text-align: center;
42  margin: 20px 0;
43}
44
45.btn-wrapper p {
46  margin: 10px 0;
47}
48
49.signup {
50  background-color: #239b76;
51}
52
53.facebook {
54  background-color: #3b5998;
55  margin-right: 10px;
56}
57
58.twitter {
59  background-color: #55acee;
60}
61
62.btn {
63  padding: 8px 24px;
64  color: white;
65  display: inline-block;
66  opacity: 0.8;
67  border-radius: 4px;
68  text-align: center;
69}
70
71.btn:hover {
72  opacity: 1;
73}
74
75.fa {
76  margin-right: 5px;
77}
78
79header {
80  height: 65px;
81  width: 100%;
82  background-color: rgba(34, 49, 52, 0.9);
83  position :fixed;
84  top: 0;
85  z-index: 10;
86}
87
88.logo {
89  width: 124px;
90  margin-top: 20px;
91}
92
93.header-left {
94  float: left;
95}
96
97.header-right {
98  float: right;
99  margin-right: -25px;
100}
101
102.header-right a {
103  line-height: 65px;
104  padding: 0 25px;
105  color: white;
106  display: block;
107  float: left;
108  transition: all 0.5s;
109}
110
111.header-right a:hover {
112  background-color: rgba(255, 255, 255, 0.3);
113}
114
115.lesson-wrapper {
116  padding-bottom: 80px;
117  padding-left: 5%;
118  padding-right: 5%;
119  background-color: #f7f7f7;
120  text-align: center;
121}
122
123.heading {
124  padding-top: 80px;
125  padding-bottom: 50px;
126  color: #5f5d60;
127}
128
129.heading h2 {
130  font-weight: normal;
131}
132
133.lesson {
134  float: left;
135  width: 25%;
136}
137
138.lesson-icon {
139  position: relative;
140}
141
142.lesson-icon p {
143  position: absolute;
144  top: 44%;
145  width: 100%;
146  color: white;
147}
148
149.text-contents {
150  width: 80%;
151  display: inline-block;
152  margin-top: 15px;
153  font-size: 13px;
154  color: #b3aeb5;
155}
156
157.heading h3 {
158  font-weight: normal;
159}
160
161.message-wrapper {
162  border-bottom: 1px solid #eee;
163  padding-bottom: 80px;
164  text-align: center;
165}
166
167.message {
168  padding: 15px 40px;
169  background-color: #5dca88;
170  cursor: pointer;
171  box-shadow: 0 7px #1a7940;
172}
173
174.message:active {
175  position: relative;
176  top: 7px;
177  box-shadow: none;
178}
179
180footer img {
181  width: 125px;
182}
183
184footer p {
185  color: #b3aeb5;
186  font-size: 12px;
187}
188
189footer {
190  padding-top: 30px;
191  padding-bottom: 20px;
192}
193
194/* -------------------- CSSはここから追加していきましょう！ -------------------- */
195.menu-icon {
196  color: white;
197  float: right;
198  font-size: 25px;
199  padding: 21px 0;
200  /* デフォルトではメニューアイコンは非表示に */
201  display: none;
202}

CSS
1/* タブレット向けレイアウト */
2@media all and (max-width: 1000px) {
3  .top-wrapper h1 {
4    font-size: 32px;
5  }
6}
7
8/* モバイル向けレイアウト */
9@media all and (max-width: 670px) {
10  .header-right {
11    display: none;
12  }
13  
14  .menu-icon {
15    display: block;
16  }
17  
18  .top-wrapper .btn {
19    width: 100%;
20  }
21
22  .facebook {
23    margin-bottom: 10px;
24  }
25  
26  .top-wrapper {
27    text-align: left;
28  }
29  
30  .top-wrapper h1 {
31    font-size: 24px;
32  }
33
34  .top-wrapper p {
35    font-size: 14px;
36  }
37}

yoshinavi

2019/04/13 04:44

CSSで「p」に「text-align:left;」以外が設定されているのでは？症状が再現するCSSコードを提示してください。

m.ts10806

2019/04/13 04:55

HTMLも全体を提示してください。読み込み順と書いてある内容がカギになる可能性もあります。

kei344

2019/04/13 05:11

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

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

回答1件

ベストアンサー

CSSの「.btn-wrapper」で「text-align: center;」を指定していますので、確認してみてください。

継承の範囲は、指定した要素の子要素には全て継承されます。しかし、一部のプロパティになります。

参考先
CSS初学者の最初の壁「スタイルの継承」をしっかり理解する

投稿2019/04/13 05:29

yoshinavi

総合スコア3523

knight1220

2019/04/13 05:36

疑問が解決しました。問題になっているところばかり見ていました。参考先まで貼ってくださりありがとうございました。

yoshinavi

2019/04/13 05:41

「何故だ???」の時は、どこかでスタイルを設定している（または、影響を受けている）場合があるので、Googleのデベロッパーツールで確認すると、適用されているCSSが分かりますので、これを機に触れてみるのも良いかと思います。参考先：初心者向け！Chromeの検証機能（デベロッパーツール）の使い方 https://saruwakakun.com/html-css/basic/chrome-dev-tool

knight1220

2019/04/13 05:48

なにからなにまでありがとうございます。わからなくてやる気がなくなっていたのですがまたやる気がでてきました。頑張って使っていきたいと思います。

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