HTML/CSS お問い合わせフォームの作成について

前提・実現したいこと

progateの道場コースでHTML CSSを勉強中にお問い合わせフォームを作るところでつまづいています。
解答とコードが違うのはわかりますが、なぜ私のコードで同じ仕様にならないのかがわかりません。

###仕様書

###エラー内容

私が書いたコード

HTML
1
2 <div class="contact">
3   <h3>お問い合わせ</h3>
4 </div>
5 
6  <form action="" method="post">
7   
8   <div class= "mail">
9   <p>メールアドレス（必須）</p>
10   <input type="email" name="email">
11   </div>
12   
13   <div class= "comment">
14   <p>お問い合わせ内容（必須）</p>
15   <textarea type="comment" name="comment"></textarea>
16   </div>
17   
18   <div class= "submit">
19   <p>※必須内容は必ずご入力ください</p>
20   <input type="submit" value="送信">
21   </div>
22</form>

CSS
1.contact h3{
2  font-size: 28px;
3  padding: 0px 0px 15px;
4  margin: 0px 80px 50px;
5  border-bottom: 2px solid #dee7ec;
6}
7
8form{
9  margin: 0px 80px 100px ;
10}
11
12input,textarea {
13   padding: 20px;
14   margin: 10px 0px 30px;
15   width: 400px;
16}
17
18input[type="submit"]{
19  font-size: 18px;
20  color: #889eab;
21  background-color: #dee7ec;
22}
23
24

解答

HTML
1
2      <div class="contact-form">
3        <h3 class="section-title">お問い合わせ</h3>
4        <p>メールアドレス（必須）</p>
5        <input>
6        <p>お問い合わせ内容（必須）</p>
7        <textarea></textarea>
8        <p>※必須項目は必ずご入力ください</p>
9        <input class="contact-submit" type="submit" value="送信">
10      </div>

CSS
1.contact-form {
2  padding-top: 100px;
3}
4
5input, textarea {
6  width: 400px;
7  margin-top: 10px;
8  margin-bottom: 30px;
9  padding: 20px;
10  font-size: 18px;
11  border: 1px solid #dee7ec;
12}
13
14.contact-submit {
15  background-color: #dee7ec;
16  color: #889eab;
17}

よろしくお願いいたします。

yoshinavi

2019/03/16 07:33

<div class= "submit">のCSSはどうなっていますか？

nopisu

2019/03/16 11:18

ご回答ありがとうございます。 input[type="submit"]{ font-size: 18px; color: #889eab; background-color: #dee7ec; } ここで指定していました。

yoshinavi

2019/03/16 11:23

分かりました。「.submit」のCSS設定は無いのですね。であれば、回答もしていますが、borderの有無を指摘されている可能性が高いと思います。

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

回答2件

borderによる幅の違いじゃないのでしょうか？

解答CSS

CSS
1input, textarea {
2  width: 400px;
3  margin-top: 10px;
4  margin-bottom: 30px;
5  padding: 20px;
6  font-size: 18px;
7  border: 1px solid #dee7ec;  /* ← ここ */
8}