文字列の表示が大きくずれてしまう理由を知りたい。

前提・実現したいこと

section-titleの「お問い合わせ」を上方向に100px、左端に80pxの間隔をとって表示させたいのですが、
大きく文字がずれてしまい、上手く表示することができずにいます。

「そもそもなぜ文字がずれてしまうのか」という理由をご教示頂けませんでしょうか。

Progateでプログラミングを始めたばかりで初心者質問で恐縮ですが、回答頂けますと幸いです。

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

section-titleの「お問い合わせ」を上方向に100px、左端に80pxの間隔をとって表示させたいのですが、
大きく文字がずれてしまっています。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Progate</title>
6    <link rel="stylesheet" href="stylesheet.css">
7  </head>
8  <body>
9    <!-- ここからHTMLを書き始めてください -->
10    
11   <div class="header">
12    <div class="header-logo">Progate</div>
13     <div class="header-list">
14      <li>プログラミングとは</li>
15      <li>学べるレッスン</li>
16      <li>お問い合わせ</li>
17     </div>
18    </div>
19    
20    <div class="main">
21      <h1>HELLO WORLD<span>.</span></h1>
22      <h2>プログラミングの世界へようこそ</h2>
23      
24       <div class="contents">
25       <h3>学べるレッスン</h3>
26       <div class="contents-item"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg" alt="" />
27        <p>HTML & CSS</p>
28       </div>
29       
30       <div class="contents-item"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg" alt="" />
31        <P>PHP</p>
32       </div>
33       
34       <div class="contents-item"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg" alt="" />
35        <p>Ruby</p>
36       </div>
37       
38       <div class="contents-item"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg" alt="" />
39        <P>Swift</p>
40       </div>
41     </div>
42     
43      <div class="contact-form">
44       <h3 class="section-title">お問い合わせ</h3>
45       <p>メールアドレス(必須)</p>
46        <input>
47        
48       <p>お問い合わせ内容(必須)</p>
49        <textarea></textarea>
50        
51       <p>※必須項目は必ずご入力ください</p>
52        <input class="contact-submit" type = "submit" value = 送信>
53        
54      </div>
55    </div>
56  </body>
57</html>

CSS
1/* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p,
5form, input, div {
6  margin: 0;
7  padding: 0;
8}
9
10body {
11  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
12}
13
14li {
15  list-style: none;
16  float:left;
17  padding:33px 20px;
18}
19
20/* ここからCSSを記述してください */
21.header{
22  background-color:#26d0c9;
23  color:#fff;
24  height:90px;
25}
26
27.header-logo{
28  float:left;
29  font-size:36px;
30  padding:20px 40px;
31}
32
33.main{
34  margin-left:80px;
35  margin-right:80px;
36}
37  
38.main h1{
39  margin-top:100px;
40  font-size:140px;
41}
42
43.main h2{
44  font-size:60px;
45}
46
47span{
48  color:red;
49}
50
51.main h2{
52  margin-bottom:100px;
53}
54
55.main h3{
56  font-size:28px;
57  border-bottom:2px solid #dee7ec;
58  margin-top:15px;
59  margin-bottom:50px;
60}
61
62.contents-item{
63  float:left;
64  margin-right:40px;
65}
66
67/*なぜ.content-item内にmargin-bottomを設定してもダメなのか？*/
68
69.contents-item p{
70  font-size:24px;
71  margin-top:30px;
72}
73
74.contact-form{
75  padding-top:100px;
76}
77
78.section-title{
79 border-bottom: 2px solid #dee7ec;
80 font-size: 28px;
81 padding-bottom: 15px;
82 margin-bottom: 50px;
83}
84
85input, textarea{
86  width:400px;
87  margin-top:10px;
88  margin-bottom:30px;
89  padding:20px;
90  font-size:18px;
91  border:1px solid #dee7ec;
92}
93
94.contact-submit{
95  background-color:#dee7ec;
96  color:#889eab;
97  margin-bottom:100px;
98}

試したこと

全角スペースが余計に入り込んでいるのかと確認してみたのですが、自分では見つけられませんでした。
また、Progate内の解答にも寄せたつもりなのですが、上手く表示させることが出来ません。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

CSS
1.contents {
2  display: flow-root;
3}

【display: flow-root で clearfix とおさらば - nlog】
https://namikuguri.hatenablog.com/entry/2018/01/30/234910

【ブロック整形コンテキスト - 開発者ガイド | MDN】
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Block_formatting_context#Using_display_flow-root

投稿2020/08/17 15:49

kei344

総合スコア69407

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！