Progateの「HTML & CSS 道場コース初級編」の「お問い合わせフォームを作ろう」という問題について　パート2

前提・実現したいこと

お問い合わせの文字が中央に表示されてしまう所を左端に表示させたい。

既に似たような質問があり拝見しました。
divの閉じタグのチェックもしました。
どうすれば左端に（お問い合わせ）表示できますか？
教えてください。

自分で書いたコード　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="main-title">
      <h1>HELLO WORLD<span>.</span></h1>
      <h2>プログラミングの世界へようこそ</h2>
      </div>
        <div class="contents">
            <div class="contents-title">
              <h3>学べるレッスン</h3>
            </div>
            <div class="contents-img">
            <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-img">
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
              <p>PHP</p>
            </div>
            <div class="contents-img">
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
              <p>Ruby</p>
            </div>
            <div class="contents-img">
              <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
              <p>Swift</p>
            </div>
        </div>
        
        
       <div class="form">
            <div class="form-text">
             <h3>お問い合わせ</h3>
           
            </div>
      </div>
      
    </div>

  </body>
</html>

自分で書いたコード　CSS

html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

/* ここからCSSを記述してください */
body{
  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}
.header{
  height:90px;
  background-color:#26d0c9;
  color:#fff;
}
.header-logo{
  padding:20px 40px;
  font-size:32px;
  float:left;
}
.header-list li{
  float:left;
  padding:33px 24px;
}
.main{
  padding:100px 80px 0 80px;
}
.main-title h1{
  font-size:140px;
}
.main-title h2{
  font-size:60px;
}
span{
  color:red;
}
.contents{
  height:500px;
}
.contents-title{
  font-size:28px;
  margin-top:100px;
  border-bottom:2px #dee7ec solid;
  padding-bottom:15px;
}
.contents-img{
  float:left;
  padding:50px 40px 0 0;
  margin-bottom:100px;
}
.contents-img p{
  font-size:24px;
  margin-top:30px;
}
.form{
}
.form-title h3{
}

試したこと

<div class="contents">の閉じタグのチェック

.form-title h3{
float:left;
}

<div class="form"> <div class="form-text"> <h3>お問い合わせ</h3> 試しに<h3>お問い合わせ</h3>の下に文字を書いたら左端に表示されました。

yoshinavi

2018/11/22 08:14

コードは全て、コードブロックにして表示させてください。

zerokara

2018/11/22 08:28

ご指摘ありがとうございます。コードブロックにして表示させました。

yoshinavi

2018/11/22 08:35

「提示コードでの表示」は、確認されていますか？

yoshinavi

2018/11/22 09:27

私の環境では「contents-img」がカラム落ちしていますので、こちらも併せて見直されると良いかと思います。

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

回答2件

ベストアンサー

floatの影響ですね
効果を解除すれば解決です

css
1  .header-logo{
2    padding:20px 40px;
3    font-size:32px;
4    /* float:left; */  /* 削除 */
5  }
6  .header-list li{
7    /* float:left; */  /* 削除 */
8    padding:33px 24px;
9  }
10  .contents{
11    /* height:500px; */  /* 削除 */
12  }
13
14  /* 以下追記でfloat解除 */
15  .contents::after{ 
16    content:"";
17    display: block;
18    clear: both;
19  }

投稿2018/11/22 08:21

akihiro3

総合スコア955

zerokara

2018/11/22 08:37

回答ありがとうございます。解決できました！

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

html内にform-titleってなくないです…？

CSS
1.form-text h3{
2　float:left;
3}

追記
当方の回答では画面サイズが小さい時、おかしな位置に表示されたままですね…。

投稿2018/11/22 07:57

編集2018/11/22 08:34

madoka9393

総合スコア992

zerokara

2018/11/22 08:14

回答ありがとうございます。ご指摘の通りhtmlにはform-titleはありませんでした。 CSSの.form-title h3を.form-text h3に書き換えました。しかし改善されませんでした。

madoka9393

2018/11/22 08:33 編集

なるほど…。こちら参照可能でしょうか？以下環境では再現できておりませんです。 https://jsfiddle.net/madoka9393/2jzx6hsg/ 失礼いたしました。当方の回答では画面サイズ次第で該当箇所がおかしなところに来てしまいますね。 akihiro3 様の回答であれば問題なく解消されるかと。当方の回答の「高評価」は解除しておいてくださいませ…。

zerokara

2018/11/22 08:38

ご親切に回答していただきありがとうございます。

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

あなたの回答