display:flex;について教えていただきたいです。

プログラミングの勉強を初めて２.3日の者です。
CSSの最後の方に入力したdisplay:flexなのですが
横並びにならなく困っています。
スペルミス、親要素の確認しました。

また　class about−rightから
class course cectionがfloat rightにならなく困っています。
長めですが回答いただけると助かります。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <link rel="icon" href="favicon.ico">
7  <title>初めてのLP</title>
8
9  <meta name="description" content="30DAYSトライアル初級編の練習用LPです。最後まで頑張っていきましょう">
10
11  <link rel="stylesheet" href="./css/reset.css">
12  <link rel="stylesheet" href="./css/style.css">
13</head>
14<body>
15
16<header>
17<div class="container">
18
19<div class="header-left">
20  <h1>30DAYSトライアル</h1>
21</div>
22
23<div class="header-right"><div class="clear"></div>
24<ul class="header-nav" >
25  <li class="header-nav-item"><a href="#">デイトラとは</a></li>
26  <li class="header-nav-item"><a href="#">コース一覧</a></li>
27  <li class="header-nav-item"><a href="#">お問い合わせ</a></li>
28  </ul>
29  </div>
30<div class="clear">
31</div>
32</div>
33</header>
34
35<section class="top">
36  <img src="./img/main-vsual.png" alt="">
37
38</section>
39
40<section class="about section">
41  <div class="container clear">
42  </div>
43    <h2 class="section-title">デイトラとは</h2>
44    <div class="about-left">
45
46      <img src="./img/about.png" alt="デイトラ とは">
47    </div>
48    <div class="about-right">
49    </div>
50     <p>デイトラ とは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につき1日一題30日でプロのWEBエンジニアを目指しましょう！</p>
51    </div>
52  </div>
53
54</section>
55
56<section class="course section">
57 <div class="container">
58   <h2 class="section-title">コース一覧</h2>
59   <div class="course-wrapper">
60      <div class="course-item">
61      </div>
62       <img src="./img/web_first.png" alt="デイトラ初級編">
63       <p>HTML/CSS/Bootstrap</p>
64      </div>
65      <div class="course-item">
66      </div>
67      <img src="./img/web_second.png" alt="デイトラ中級編">
68      <p>HTML/CSS/Javascript/jquery</p>
69   </div>
70      <div class="course-item"></div>
71       <img src="./img/web_third.png" alt="デイトラ上級編">
72        <p>PHP/WordPress</p>
73   </div>
74 </div>
75</section>
76
77
78<section class="contact section">
79  <div class="container">
80 <h2 class="section-title"> お問合せ</h2>
81 <p>さあ今日から30日間始めよう</p>
82<form action="#" method="post">
83  <input type="email" name="email" id="email">
84  <button type="submit">無料で始める</button>
85</form>
86</section>
87
88</header>
89  
90<footer>
91
92
93</footer>
94</body>
95</html>

CSS
1body{
2  color:#082B48;
3  font-family: Verdana, Geneva, Tahoma, sans-serif;
4  line-height: 1.5;
5}
6
7img{
8  width: 100%;
9  height: auto;
10}
11
12a{
13  text-decoration: none;
14  color:#082B48
15}
16
17a:hover{
18  opacity: 0.7;
19}
20
21
22.container{
23  width: 90%;
24  max-width: 980px;
25  margin: auto;
26}
27
28.header-title {
29  font-weight: bold;
30  font-size: 24px;
31}
32
33.clear{
34  clear: both;
35}
36
37.header{
38  padding: 20px 0;
39}
40
41.header-left{
42  float: left;
43}
44
45.clear{
46  clear: both;
47}
48
49.header-right{
50  float: right;
51}
52 
53.header-nav-item{
54  float: left;
55  margin-left: 50px;
56}
57
58.header-nav-item a{
59  font-size: 15px;
60  font-weight: 600px;
61  line-height: 36px;
62}
63
64top{
65  background-color: lightblue;
66  height: 400px;
67  line-height: 36px;
68}
69
70/* ＝＝＝＝＝＝＝ */
71/* section */
72/* ＝＝＝＝＝＝＝ */
73.section{
74  padding: 60px 0;
75}
76
77.section-title{
78  font-style:32px;
79  font-weight: bold;
80  text-align: center;
81  margin-bottom: 40px;
82}
83
84.about-left{
85  float: left;
86  width: 48%;
87}
88
89.about-right{
90  float: right;
91  width: 48%;
92}
93
94.course-wrapper{
95  display: flex;
96}

greenleave10000

2020/11/01 06:45

ペイントソフト等で簡単でいいのでどのようなレイアウトか教えていただけないでしょうか？

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

回答2件

CSS
1.course-wrapper{
2  display: flex;
3}

というのは、「couse-wrapperクラスの内部に書いた要素を、flexレイアウトで表示する」という指示です。

ところが、HTMLファイルを見ると、course-wrapperクラスのdiv要素の付近が正しく構成されていません。

HTML
1   <div class="course-wrapper">
2      <div class="course-item">
3      </div>
4      <img src="./img/web_first.png" alt="デイトラ初級編">
5      <p>HTML/CSS/Bootstrap</p>
6      </div>
7      <div class="course-item">
8      </div>
9      <img src="./img/web_second.png" alt="デイトラ中級編">
10      <p>HTML/CSS/Javascript/jquery</p>
11   </div>
12   <div class="course-item"></div>
13   <img src="./img/web_third.png" alt="デイトラ上級編">
14   <p>PHP/WordPress</p>
15   </div>

おそらく、別の回答者の方の回答のように、course-itemクラスのdiv要素を横に並べて表示したいのでしょうが、実際には、

3個あるcourse-itemクラスのdiv要素の内容には何も書かれておらず、画像と段落がその直後に書かれている。
ひとつめとみっつめの画像の直後にdiv要素の終了タグ</div>が存在するが、対応する開始タグがない。
みっつめのcourse-itemクラスのdiv要素はcourse-wrapperクラスのdiv要素の外側にある。

という状態です。

div要素の役割や、開始タグと終了タグの対応に注意してお書きになるといいかと思います。

投稿2020/11/01 03:57

編集2020/11/01 03:59

Daregada

総合スコア11990

下のようにしてみてうまく行くか試してもらえないでしょうか？

<section class="course section">
    <div class="container">
        <h2 class="section-title">コース一覧</h2>
        <div class="course-wrapper">
            <div class="course-item">
                <img src="./img/web_first.png" alt="デイトラ初級編">
                <p>HTML/CSS/Bootstrap</p>
            </div>
            <div class="course-item">
                <img src="./img/web_second.png" alt="デイトラ中級編">
                <p>HTML/CSS/Javascript/jquery</p>
            </div>
            <div class="course-item">
                <img src="./img/web_third.png" alt="デイトラ上級編">
                <p>PHP/WordPress</p>
            </div>
        </div>
    </div>
</section>

これはインデント空白４文字なので、空白２文字のほうが良いのであれば、したのようなWEBサービスを使って変更してください。
https://lab.syncer.jp/Tool/HTML-PrettyPrint/

追記: