float：flexが反映されず困っています。

長くてすみません、float:flex1が反映されず困っています。

スペルミス、親要素の確認などしました。
HTML↓

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="favicon.ico">
  <title>初めてのLP</title>

  <meta name="description" content="30DAYSトライアル初級編の練習用LPです。最後まで頑張っていきましょう">

  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>

<header>
<div class="container">

<div class="header-left">
  <h1>30DAYSトライアル</h1>
</div>

<div class="header-right"><div class="clear"></div>
<ul class="header-nav" >
  <li class="header-nav-item"><a href="#">デイトラとは</a></li>
  <li class="header-nav-item"><a href="#">コース一覧</a></li>
  <li class="header-nav-item"><a href="#">お問い合わせ</a></li>
  </ul>
  </div>
<div class="clear">
</div>
</div>
</header>

<section class="top">
  <img src="./img/main-vsual.png" alt="">

</section>

<section class="about section">
  <div class="container clear">
  </div>
    <h2 class="section-title">デイトラとは</h2>
    <div class="about-left">

      <img src="./img/about.png" alt="デイトラ とは">
    </div>
    <div class="about-right">
    </div>
     <p>デイトラ とは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につき1日一題30日でプロのWEBエンジニアを目指しましょう！</p>
    </div>
  </div>

</section>

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


<section class="contact section">
  <div class="container">
 <h2 class="section-title"> お問合せ</h2>
 <p>さあ今日から30日間始めよう</p>
<form action="#" method="post">
  <input type="email" name="email" id="email">
  <button type="submit">無料で始める</button>
</form>
</section>

</header>
  
<footer>


</footer>
</body>
</html>```> - 

> CSS↓
body{
  color:#082B48;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  line-height: 1.5;
}

img{
  width: 100%;
  height: auto;
}

a{
  text-decoration: none;
  color:#082B48
}

a:hover{
  opacity: 0.7;
}


.container{
  width: 90%;
  max-width: 980px;
  margin: auto;
}

.header-title {
  font-weight: bold;
  font-size: 24px;
}

.clear{
  clear: both;
}

.header{
  padding: 20px 0;
}

.header-left{
  float: left;
}

.clear{
  clear: both;
}

.header-right{
  float: right;
}
 
.header-nav-item{
  float: left;
  margin-left: 50px;
}

.header-nav-item a{
  font-size: 15px;
  font-weight: 600px;
  line-height: 36px;
}

top{
  background-color: lightblue;
  height: 400px;
  line-height: 36px;
}

/* ＝＝＝＝＝＝＝ */
/* section */
/* ＝＝＝＝＝＝＝ */
.section{
  padding: 60px 0;
}

.section-title{
  font-style:32px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
}

.about-left{
  float: left;
  width: 48%;
}

.about-right{
  float: right;
  width: 48%;

.course-wrapper{
  display: flex;
}

itzuakniami123

2020/11/09 03:10

特にHTML部分の記述が見づらいです。テンプレートにもあるようにマークダウン記法で記述してください。 ```HTML ここにコードを書く ``` 質問は編集できるので、やってみてください。回答が得られやすくなるはずです。 <code>のボタンを押すと簡単に作成できます。

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

回答1件

質問の内容的に要素がきちんと並ばなくて困っているという認識で合っていますか？

floatプロパティについて

　ぶっちゃけfloatで要素を並べるのは、オワコンと言ってもいいです。現在ほとんどのサイトがflexboxを採用しています。下記のサイトで詳しく書かれているので見てみてください。
【HTML5】float:leftはもう使わないよ？ – 要素を横並びにするには

HTMLについて

　ざっくりとしたコードレビューになりますが、何のためにdivやsection要素を作成したの？と思う部分が多々ありました。意味を理解していないせいか、閉じタグが余計にあったり文字や画像を入れていないのに要素を作成していたりしていたので下記サイトを参考に要復習です。
文書構造を意識しながらHTMLマークアップしよう！
デイトラと書かれてあったので以下のサイトを模倣して作ったのではないかなと思いました。
デイトラ 30DAYSトライアル

下記に私の作成したコードを記載しておきます。
色味も似せて作ってみました。また、どの要素がまとまっていているかわかりやすいようにダミーで背景色を設定しています。
これが100%正解ではないですし、急いで作成したのでHTMLが甘い部分がありますがご容赦ください。

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.0">
6	<link rel="stylesheet" href="style.css">
7	<title>初めてのLP</title>
8</head>
9<body>
10	<header>
11		<div class="container">
12			<div class="header-left">
13				<h1>30DAYSトライアル</h1>
14			</div>
15			<div class="header-right">
16				<ul class="header-nav" >
17					<li class="header-nav-item"><a href="#">デイトラとは</a></li>
18					<li class="header-nav-item"><a href="#">コース一覧</a></li>
19					<li class="header-nav-item"><a href="#">お問い合わせ</a></li>
20				</ul>
21			</div>
22		</div>
23	</header>
24
25	<div id="mainvisual">メイン画像</div>
26
27	<main>
28		<h2>デイトラとは</h2>
29		<div class="flexbox">
30			<div id="about">
31				<div id="img1">画像</div>
32				<p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。毎日設定された課題をこなして行くだけで、未経験から30日でプログラミングスキルが身につきます。1日1題30日でプロのWebエンジニアを目指しましょう！</p>
33			</div>
34		</div>
35		<h2>コース一覧</h2>
36		<div class="flexbox">
37			<div class="contents" id="beginner">
38				<h3>初級コース</h3>
39				<p>HTML / CSS / Bootstrap</p>
40			</div>
41			<div class="contents" id="intermediate">
42				<h3>中級コース</h3>
43				<p>HTML / CSS / Javascript / jQuery</p>
44			</div>
45			<div class="contents" id="advanced">
46				<h3>上級コース</h3>
47				<p>PHP / WordPress</p>
48			</div>
49		</div>
50
51		<div id="contact">
52			<h2>お問い合わせ</h2>
53			<p>さあ今日から30日間を始めよう！</p>
54			<div id="input">
55				<form action="#" method="post"><input type="email" name="email" placeholder=" メールアドレス" id="email"></form>
56			</div>
57			<a href="#"><p id="bottom">無料ではじめる</p></a>
58		</div>
59	</main>
60
61</body>
62</html>

*{
	margin: 0;
	padding: 0;
}
body{
	color:#082B48;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	line-height: 1.5;
}
a{
	text-decoration: none;
}
li{
	list-style: none;
}
.flexbox{
	display: flex;
}
header{
	width: 740px;
	margin:0 auto;
	background-color: #ccc;
}
.container{
	display:flex;
	justify-content: space-between;
}
.header-left h1{
	font-size: 24px;
}
.header-right{
	right: 0;
}
.header-nav{
	display:flex;
	justify-content: space-between;
}
.header-nav-item{
	padding: 10px 0;
	width: 130px;
}
#mainvisual{
	width: 100%;
	height: 450px;
	background-color: #AFEEDB;
}
main{
	width: 740px;
	margin:0 auto;
	background-color: #ccc;
}
main h2{
	text-align: center;
	font-size: 20px;
	padding-top:15px;
}
main h3{
	font-weight: normal;
}
#about{
	display:flex;
	margin-top: 30px;
}
#img1{
	background-color: #fcc;
	width: 350px;
	height: 200px;
}
#about p{
	width: 350px;
	font-size: 15px;
	margin-left: 15px;
}
.contents{
	width: 260px;
	height: 100px;
	margin:10px;
	margin-top: 30px;
}
.contents h3{
	text-align: center;
}
.contents p{
	font-size: 13px;
}
#beginner{
	background-color: #ACC6FB
}
#intermediate{
	background-color: #83D6C3;
}
#advanced{
	background-color: #EFBED4;
}
#contact{
	margin-top: 30px;
}
#contact p{
	text-align: center;
	margin-top:20px;
}
#bottom{
	width: 280px;
	color: #fff;
	border-radius: 10px;
	background-color: #EC6C63;
	padding: 13px 0;
	margin:0 auto;
	margin-top:15px;
}
#input{
	text-align: center;
}
#email{
	width: 400px;
	height: 35px;
	margin: 0 auto;
	border-radius: 30px;
	border: 2px solid #ddd;
}

投稿2020/11/09 07:37

itzuakniami123

総合スコア74