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

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

css
1@media (max-width: 1000px) {
2  .lesson {
3    width: 50%;
4    margin-bottom: 50px;
5  }
6}
7
8/* スマホ向けレイアウト */
9@media (max-width: 670px) {
10  .lesson {
11    width: 100%;
12  }
13
14  footer {
15    text-align: center;
16  }
17
18  /* .btnのwidthを100%に指定してください */
19  .btn{
20    width:100%;
21  }
22
23  /* .facebookにmargin-bottom: 10px;を追加してください */
24  .facebook{
25    margin-bottom:10px;
26  }
27
28  /* .top-wrapperの中身を左寄せに、padding-topを130pxに指定してください */
29  .top-wrapper{
30    text-align:left;
31  }
32
33}