プロゲート初級道場　コード不明

お問合わせフォームのお問い合わせの文字がなぜか左側からではなく中央から開始してしまうのですがプロゲートの回答などもみましたが原因が分かりませんでした。　
ご回答よろしくお願いいたします。

**HTML**
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <!-- ここからHTMLを書き始めてください -->
    <div class="header">
      <div class="header-logo">Progate</div>
      <div class="header-list">
        <ul>
          <li>プログラミングとは</li>
          <li>学べるレッスン</li>
          <li>お問い合わせ</li>
        </ul>
      </div>
      
    </div>
    <div class="main">
      
      <div class="copy-container">
        <h1>HELLO WORLD<span>.</span></h1>
        <h2>プログラミングの世界へようこそ</h2>
      </div>
      <div class="contents">
        <h3 class="section-title">学べるレッスン</h3>
        <div class="contents-item">
         <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
         <p>HTML & CSS</p>
        </div>
        <div class="contents-item">
         <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
         <p>PHP</p>
        </div>
        <div class="contents-item">
         <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
         <p>Ruby</p>
        </div>
        <div class="contents-item">
         <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
         <p>Swift</p>
        </div>
      </div>
      <div class="contact-form">
        <h3 class="section-title">お問合わせ</h3>
      </div>
    </div>
  </body>

</html>

**CSS**
ボールドテキストhtml, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}

li {
  list-style: none;
  float: left;
  padding: 33px 20px;
}

/* ここからCSSを記述してください */
.header {
  background-color: #26d0c9;
  height: 90px;
  color: #fff;
}

.header-logo {
  font-size: 36px;
  float: left;
  padding: 20px 40px;
  color: white;
  
}

.main {
  padding: 100px 80px;
}

.copy-container h1 {
  font-size: 140px;
}

.copy-container h2 {
  font-size: 60px;
  margin-bottom: 100px;
}

span {
  color: #ff4a4a;
}

.contents-item {
  float: right;
}



.section-title {
  font-size: 28px;
  border-bottom: 2px solid #dee7ec;
  margin-bottom: 50px;
  padding-bottom: 15px;
}

.contents-item {
  margin-top: 50px;
  margin-right: 40px;
}
 
.contents-item p {
  font-size: 24px;
  padding-bottom: 100px;
  padding-top: 30px;
}

kei344

2020/05/30 16:33

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

kei344

2020/05/30 16:45

</code>を書いても意味ないですよ。編集エリア上部に「<code>」ボタンがあるはずなので、探してください。また、PCであれば記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。

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

回答1件

ベストアンサー

floatが適切に処理されていないのでそうなっています。クリアするか、下記コードを追加してください。

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

投稿2020/05/30 17:01

kei344

総合スコア69606

rose_10

2020/05/30 17:16

解決しました。ありがとうございました！別クラスで設定しているのになぜ左側から始まるのではなく中央から始まってしまうのですか？

kei344

2020/05/30 17:22

クリアしないとfloatは後続全てに影響します。中央から始まっているのではなく何らかの要素に引っかかって真ん中あたりに在っただけだと思います。

rose_10

2020/05/30 17:36

わかりました！ありがとうございました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

プロゲート初級道場　コード不明

関連した質問