cssは効いているはずなのですが反映されない

Question

前提・実現したいこと

cssを反映させたい
(margin: 0 auto;)

cssには反映させたい処理しか書いていないのですが、何も反映されない件について質問させてください。
これより前のものは反映されています。

ご教示いただけましたら幸いです。
よろしくお願い致します。

該当のソースコード

<section class="contact">
    <div class="contact-container">
      <div class="contact-title">
        <h1 class="contact-titletext">お問い合わせ</h1>
        <p class="contact-subtext">CONTACT</p>
      </div>
      <div class="contact-comment">コーディングの人出が足りないとき、<br>
      あなたの力になります</div>
      <div class="contact-form">
        <form action="confirm.php" method="post">
          <div class="contact-name">
            <label for="name" name="name">お名前</label>
            <input type="text" id="name">
          </div>
          <div class="contact-mail">
            <label for="mail">メールアドレス</label>
            <input type="email" id="mail" name="mail">
          </div>
          <div class="contact-contents">
            <label for="contents">お問い合わせ内容</label>
            <textarea name="contents" id="contents"></textarea>
          </div>
          <div class="contact-check">
            <input type="checkbox" name="check" id="check">
            <label for="check">プライバシーポリシーに同意する</label>
          </div>
          <div class="contact-submit">
            <input type="submit" name="submit" id="submit" value="送信">
          </div>
        </form>
      </div>
    </div>
  </section>

.contact {

  .contact-container {

    .contact-title {

      margin: 0 auto;

      .contact-titletext {}

      .contact-subtext {}
    }

    .contact-comment {}

    .contact-form {

      margin: 0 auto;

      form {

        .contact-name {

          label {}

          input {}
        }

        .contact-mail {

          label {}

          input {}
        }

        .contact-contents {

          label {}

          textarea {}
        }

        .contact-check {

          input {}

          label {}
        }

        .contact-submit {

          input {}
        }
      }
    }
  }
}

試したこと

htmlにcssを追加しました。

<link rel="stylesheet" href="css/contact.css">

Answer 1

margin: 0 auto;

は省略しないと

  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;

となり、上下余白は0、左右余白は right と left に均等に分配するという意味になります。

設定してある<div class="contact-title">はdivなのでブロックレベル要素となり、親の幅一杯に広がり左右に余白はありません。ですので、均等に分配しても変化はないです。

適当なwidthを設定するか、下記のようにwidthを設定すれば中央に配置されます。

      width: max-content;
      margin: 0 auto;

Comments

[seakai]

containerにwidthを設定するとできました！
ありがとうございました。

Answer 2

css/contact.cssに対応しているscssファイル内で、てきとーにbody要素の背景色を赤とかに変えてみてください。

それで変更されなかったら、ファイルの読み込みがミスっていると切り分けできると思いますし、変更されれば、セレクターがおかしいと切り分けできると思います。

Comments

[seakai]

widthを設定していないのが原因でした。
次に困った時はそちらを試してみます！
ありがとうございました。