box-sizingプロパティがコンタクトフォームに効かない原因がわかりません。

前提・実現したいこと

ゼロからランディングページ作成中です。
box-sizingプロパティがコンタクトフォームにのみ効かず、解決方法が分からず困っています。
インナー要素としてcontainerクラスを設置し、box-sizing: border-boxを設定しました。
他の要素は問題なく効いています。

発生している問題・エラーメッセージ

エラーメッセージ：　特になし

該当のソースコード

html
1 <!-- Contact -->
2  <div id="contact" class="contact">
3    <div class="section-title contact-title">
4      <h2 class="title">Contact</h2>
5    </div>
6    <div class="container contact-form">
7      <input placeholder="姓">
8      <input placeholder="名">
9      <input placeholder="メールアドレス">
10      <div class="contact-detail box">
11        <textarea placeholder="お問い合わせ内容を入力してください"></textarea>
12      </div>
13      <a class="btn" href="#">送信</a>
14    </div>
15  </div>
16  <!-- Contact -->

scss
1.container {
2  width: 1100px;
3  max-width: 100%;
4  margin: 0 auto;
5  padding: 3rem 1.5rem;
6  box-sizing: border-box;
7}
8
9// Contact
10
11.contact {
12  
13  .contact-title {
14    background-image: url(/img/profile5.jpg);
15    background-position: center;
16  }
17
18  .contact-form {
19    margin: 0 auto;
20    box-sizing: border-box;
21    
22
23    input {
24      -moz-appearance: none;
25      -webkit-appearance: none;
26      appearance: none;
27      background-color: $main;
28      border: 1px solid $main;
29      font-size: 1rem;
30      padding: 0 .3rem;
31      width: 100%;
32      border-radius: .2rem;
33      height: 3rem;
34      margin: .5rem auto;
35    }
36
37    textarea {
38      -moz-appearance: none;
39      -webkit-appearance: none;
40      appearance: none;
41      background-color: $main;
42      border: 1px solid $main;
43      font-size: 1rem;
44      padding: 0.3rem;
45      width: 100%;
46      border-radius: .2rem;
47      height: 10rem;
48      margin: .5rem auto;
49    }
50  }
51}
52// Contact