Progate HTML & CSS 学習コース上級編 9. スマートフォン向けのレイアウト（２）について

プログラミング初心者のものです。
タイトルの内容で質問ですが、
スマートフォン用のレスポンシブの中で、
.top-wrapper{
text-align:left;
}
と書いてありますが、
htmlのtop-wrapper内の**<p>or</p>**だけが左寄りにならないのは何故でしょうか？
htmlのコードを見ると、top-wrapperの中に<p>or</p>も入っているので、text-align:left;なら左寄せになると思うのですが...
htmlとcssのコード載せます。Progateのコードをそのまま載せてますが、不要なコメントは削除してあります。
当たり前のことがわかってないだけかも知れませんが、よろしくお願いします！
（可能であればProgateを覗いていただけた方が早いかも知れません）

<!-- html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="responsive.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  </head>
  <body>
    <header>
      <div class="container">
        <div class="header-left">
          <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
        </div>
        <div class="header-right">
          <a href="#">レッスン</a>
          <a href="#">新規登録</a>
          <a href="#" class="login">ログイン</a>
        </div>
      </div>
    </header>
    <div class="top-wrapper">
      <div class="container">
        <h1>LEARN TO CODE.</h1>
        <h1>LEARN TO BE CREATIVE.</h1>
        <p>Progateはオンラインプログラミング学習サービスです。</p>
        <p>初心者にもやさしいスライドとレッスンで、Webサービスを作りながらプログラミングを学んでいきましょう。</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>
    <div class="lesson-wrapper">
      <div class="container">
        <div class="heading">
          <h2>Learn Where to Get Started!</h2>
        </div>
        <div class="lessons">
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/html.png">
              <p>HTML & CSS</p>
            </div>
            <p class="text-contents">Webページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
              <p>jQuery</p>
            </div>
            <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/ruby.png">
              <p>Ruby</p>
            </div>
            <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
          </div>
          <div class="lesson">
            <div class="lesson-icon">
              <img src="https://prog-8.com/images/html/advanced/php.png">
              <p>PHP</p>
            </div>
            <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
          </div>
          <div class="clear"></div>
        </div>
      </div>
    </div>
    <div class="message-wrapper">
      <div class="container">
        <div class="heading">
          <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
          <h3>Let's learn to code, learn to be creative!</h3>
        </div>
        <span class="btn message">さっそく開発する</span>
      </div>
    </div>
    <footer>
      <div class="container">
        <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
        <p>Learn to code, learn to be creative.</p>
      </div>
    </footer>
  </body>
</html>


<!-- responsive.css -->
@media (max-width: 1000px) {
  .lesson {
    width: 50%;
    margin-bottom: 50px;
  }
}

@media (max-width: 670px) {
  .lesson {
    width: 100%;
  }

  footer {
    text-align: center;
  }

  .btn{
    width:100%;
  }

  .facebook{
    margin-bottom:10px;
  }

  .top-wrapper{
    text-align:left;
    padding-top:130px;
  }

}

nomura02

2021/01/11 13:15

こんにちは！私もプロゲートをやって、今実際に案件を進めてる初心者です！復習がてら、お力になりたいのですが左寄りにならない、というのは、 inline要素のように「新規登録はこちらorFacebookで登録 Twitterで登録」とならない、ということでしょうか？それなら、pはブロック要素なので、改行されてしまうと思うのですが私もよく先輩に怒られるのですが、どういう形にしたいかまず明確に書いた方が、助け舟を出しやすいです。

gef57378

2021/01/11 14:31

メッセージありがとうございます。どういう形にしたいとかではないのですが(説明が下手ですみません)、 <div class="top-wrapper"> <div class="container"> <h1>LEARN TO CODE.</h1> <h1>LEARN TO BE CREATIVE.</h1> <p>Progateはオンラインプログラミング学習サービスです。</p> <p>初心者にもやさしいスライドとレッスンで、Webサービスを作りながらプログラミングを学んでいきましょう。</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> のときに、cssで .top-wrapper{ text-align:left; } で左寄せにすると、top-wrapper内のテキストが左に寄ると思うのですが、「or」だけ左寄せにならないのは何でだろう？と疑問に思いました。どっちもtop-wrapperの中にあるはずなので...