Progate　道場コース　初級編のお問い合わせフォームについての質問です。(HTML & CSS)

前提・実現したいこと

Progateの道場コース初級編を勉強しています。

学べるレッスンのテキストの下の４つの画像の下に「お問い合わせ」と表示させたいのですが、
どうしても画像の右側に「お問い合わせ」と表示されてしまいます。
１〜２時間ほど見直し悩んでみたのですが、わかりませんでした。
お手数なのですが、どなたか教えて頂けないでしょうか。

該当のソースコード

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      <p class="header-logo">Progate</p>
13      <ul class="header-list">
14        <li>プログラミングとは</li>
15        <li>学べるレッスン</li>
16        <li>お問い合わせ</li>
17      </ul>
18    </div>
19    
20   
21    <div class="contents">
22      <h1>HELLO WORLD<span>.</span></h1>
23      <h2>プログラミングの世界ようこそ</h2>
24     <div class="main-container">
25       <h3>学べるレッスン</h3>
26     </div> 
27     <div class="main-contents">
28       <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
29       <p>HTML & CSS</p>     
30     </div>
31     <div class="main-contents">
32       <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
33       <p>PHP</p>     
34     </div>
35     <div class="main-contents">
36       <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
37       <p>Ruby</p>     
38     </div>
39     <div class="main-contents">
40       <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
41       <p>Swift</p>     
42     </div>
43    </div>
44  
45   
46    <div class="contact-form">
47      <p class="contact-form-title">お問い合わせ</p>
48     
49    </div>
50
51    
52  </body>
53</html>

CSS
1.header{
2  background-color:#26d0c9;
3  height:90px;
4  color:#fff;
5}
6
7.header-logo{
8  font-size:36px;
9  float:left;
10  padding:20px 40px;
11}
12
13.header-list li{
14  float:left;
15  padding:33px 20px;
16}
17
18.contents{
19  padding:100px 80px;
20}
21
22.contents h1{
23  font-size:140px;
24}
25
26.contents h2{
27  font-size:60px;
28  padding-bottom:100px;
29}
30
31.contents h1 span{
32  color:#ff4a4a;
33}
34
35.main-container h3{
36  font-size:28px;
37  padding-bottom:15px;
38  border-bottom:2px solid #dee7ec;
39}
40
41.main-contents{
42  float:left;
43  margin-top:50px;
44  margin-bottom:30px;
45  margin-right:40px;
46}
47
48.main-contents p{
49  font-size:24px;
50  padding-top:30px;
51}
52

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

回答1件

ベストアンサー

スクショが無いので明確に状況は把握できませんが、おそらくmain-contentsに指定してあるfloat: leftの影響だと思います。
次に来る要素が右に回り込んでしまうので、回り込みの影響を受けさせたくない要素にはclearプロパティを指定します。

この場合は以下のようにすると良いでしょう。

CSS
1contact-form {
2    clear: both;
3}
4

また、状況にもよりますが横並びには Flexbox を使った方が良いと思います。

投稿2019/11/12 13:53

NAOPI-05

総合スコア132

mn132f9

2019/11/13 10:19

NAOPI-05さま、ご回答誠にありがとうございます。（画像を追加で貼りました。初めての質問につき貼り方がわからず失礼しました。）上記試してみましたところ、うまくいきました。 floatが効いていそうだなと思いながらも結局辿り着けずでしたので大変助かりました。 floatの学習し直しと、flexbox,clear学習してみます。ありがとうございました。

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