指定された正しい修正を解決したいです

前提・実現したいこと

指定された正しいコードに訂正していきたいです

中央寄せができていません

4, インデントは半角スペース２つにしましょう

5, cssの見た目をきちんと成形してください。

6, clearfixはfloatをした要素の直近の親にあてましょう。

<!DOCTYPE html>
<html lang="ja">
<head>

　<meta charset="utf8">
　<title>div puzzle1</title>
　<link rel="stylesheet" href="index.css">
</head>

<body>
	<div class= "clearfix">
	　<div class="box-a"></div>
	　<div class="box-b"></div>
	　<div class="box-c"></div>
	　<div class="box-d"></div>
</div>

</body>
</html>
コード

コード
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

.clearfix{width:400px; height:250px;}

.box-a{
height:100px;
width:400px;
float: left;
background-color:#141f40;



}


.box-b{
height:250px;
width:150px;
float:left;
background-color:#80bfa8;

}

.box-c{
height:250px;
width:250px;
float:left;
background-color:#8c2727;

}



.box-d{
height:100px;
width:400px;
float:left;
background-color:#d98d30;
}

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

自分で調べて解決出来なくて困ってます

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

gentaro

2019/08/15 16:19

なんかの課題だったらせんせいに聞いてみましょう。

m.ts10806

2019/08/15 22:46

どこでどのようにもらった指示なのでしょうか。前提や背景は必要です。

tetutetu

2019/08/16 00:46

まずは質問文の成型から始めては如何でしょうか

kj10969

2019/08/16 00:51

ご指摘ありがとうございます！

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

回答1件

ベストアンサー

インデントの意味がわかれば、難しくないと思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4　<meta charset="utf8">
5　<title>div puzzle1</title>
6　<link rel="stylesheet" href="index.css">
7</head>
8<body>
9  <div class="clearfix">
10    <div class="box-a"></div>
11    <div class="box-b"></div>
12    <div class="box-c"></div>
13    <div class="box-d"></div>
14  </div>
15</body>
16</html>

また2行空いてたり1行空いてたり、インデントがあったりなかったりを整えると綺麗に見えます。

css
1.clearfix::after{
2  content: "";
3  display: block;
4  clear: both;
5}
6.clearfix{
7  width:400px;
8  height:250px;
9}
10.box-a{
11  height:100px;
12  width:400px;
13  float: left;
14  background-color:#141f40;
15}
16.box-b{
17  height:250px;
18  width:150px;
19  float:left;
20  background-color:#80bfa8;
21}
22.box-c{
23  height:250px;
24  width:250px;
25  float:left;
26  background-color:#8c2727;
27}
28.box-d{
29  height:100px;
30  width:400px;
31  float:left;
32  background-color:#d98d30;
33}