正解のコードと実際に僕が書いたコードの両方を掲載しておきます。
なんでこれが不正解になるのかわかりまません。
lessonの要素が横並びにならず縦並びになっていまします。

不正解のコード

コード<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Progate</title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
  <!-- ここにコードを書いていきましょう -->

  <div class="top-wrapper">
    <div class="container">
      <h1>LEARN TO CODE.<br> LEARN TO BE CREATIVE.</h1>
      <p>progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>

      <a href class="btn signup">新規登録はこちら</a>
      <p>
      or
      </p>
      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>facebookで登録</a>
      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>twitterで登録</a>
    </div>
  </div>

<header>
    <div class="container">
      <div class="header-left">
        <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
      </div>
      <div class="header-right">
        <a href="#" class="login">ログイン</a>
      </div>
    </div>
  </header>

  <div class="lesson-wrapper">
  <div class="container">
    <div class="heading">
      <h2>Learn Where to Get Started!</h2>
    </div>

    <div class="lessons">
      <div class="lessson">

        <div class="lesson-icon">
        <img src="https://prog-8.com/images/html/advanced/html.png" >
        <p>HTML＆CSS</p>
        </div>
          <div class="text-contents">
            <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
          </div>

        <div class="lesson-icon">
        <img src="https://prog-8.com/images/html/advanced/jQuery.png">
        <p>JQuery</p>
        </div>
        <div class="text-contents">
          <p>素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
        </div>

        <div class="lesson-icon">
        <img src="https://prog-8.com/images/html/advanced/ruby.png">
        <p>Ruby</p>
        </div>
        <div class="text-contents">
          <p>オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
        </div>

        <div class="lesson-icon">
        <img src="https://prog-8.com/images/html/advanced/php.png">
        <p>PHP</p>
        </div>
        <div class="text-contents">
          <p>HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
        </div>

      </div>

    </div>

    </div>
  </div>

css
1コード* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17a {
18  text-decoration: none;
19}
20
21/* ここからcssを書いていきましょう */
22.top-wrapper{
23  background-image:url(https://prog-8.com/images/html/advanced/top.png);
24  padding:180px 0 100px 0;
25  background-size: cover;
26
27}
28
29.container{
30  color: white;
31  text-align: center;
32  margin: 0 auto;
33  width: 1170px;
34  padding: 0 15px;
35}
36
37.top-wrapper h1{
38  font-size: 45px;
39  opacity: 0.7;
40  letter-spacing: 5px;
41}
42
43.top-wrapper p{
44  opacity: 0.7;
45  margin-bottom: 15px;
46}
47
48.signup{
49 background-color: #239b76;
50 margin-top: 15px;
51 margin-bottom: 15px;
52}
53
54.facebook{
55  background-color: #3b5998;
56  margin-right: 10px;
57}
58
59.twitter{
60  background-color: #55acee;
61}
62
63.btn{
64  padding: 8px 24px;
65  color: white;
66  display:inline-block;
67  opacity:0.8;
68  border-radius: 4px;
69}
70
71btn:hover{
72  opacity: 1;
73}
74
75.fa{
76  margin-right: 5px;
77}
78
79header{
80  width: 100%;
81  height: 65px;
82  background-color: rgba(34,49,52,0.9);
83  position :fixed;
84  top: 0;
85  z-index: 10;
86}
87
88.logo {
89  width: 124px;
90  margin-top: 20px;
91}
92
93.header-left {
94  float: left;
95}
96
97.header-right {
98  float: right;
99  background-color: rgba(255, 255, 255, 0.3);
100  transition: all 0.5s;
101}
102
103.header-right:hover {
104  background-color: rgba(255, 255, 255, 0.5);
105}
106
107.header-right a {
108  line-height: 65px;
109  padding: 0 25px;
110  color: white;
111  display: block;
112}
113
114
115.lesson-wrapper {
116  height: 580px;
117  background-color: #f7f7f7;
118}
119
120.heading{
121  padding-top: 80px;
122  padding-bottom: 50px;
123  text-align: center;
124  color: #5f5d60;
125}
126
127.heading h2{
128  font-weight: normal;
129}
130
131.lesson-icon{
132  width: 25%;
133  float:left;
134}
135
136.lesson{
137  position: relative;
138}
139
140.lesson-icon p{
141  position: absolute;
142  top: 44%;
143  width: 100%;
144  color: white;
145}
146
147.text-contents{
148  width: 80%;
149  font-size: 13px;
150  color: #b3aeb5;
151  margin-top: 15px;
152  display: inline-block;
153}

正解のコード

html
1コード<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" type="text/css" href="stylesheet.css">
7  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
8</head>
9<body>
10  <header>
11    <div class="container">
12      <div class="header-left">
13        <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
14      </div>
15      <div class="header-right">
16        <a href="#" class="login">ログイン</a>
17      </div>
18    </div>
19  </header>
20  <div class="top-wrapper">
21    <div class="container">
22      <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
23      <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
24      <a href="#" class="btn signup">新規登録はこちら</a>
25      <p>or</p>
26      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
27      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
28    </div>
29  </div>
30  <div class="lesson-wrapper">
31    <div class="container">
32      <div class="heading">
33        <h2>Learn Where to Get Started!</h2>
34      </div>
35      <div class="lessons">
36        <div class="lesson">
37          <div class="lesson-icon">
38            <img src="https://prog-8.com/images/html/advanced/html.png">
39            <p>HTML & CSS</p>
40          </div>
41          <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
42        </div>
43        <div class="lesson">
44          <div class="lesson-icon">
45            <img src="https://prog-8.com/images/html/advanced/jQuery.png">
46            <p>jQuery</p>
47          </div>
48          <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
49        </div>
50        <div class="lesson">
51          <div class="lesson-icon">
52            <img src="https://prog-8.com/images/html/advanced/ruby.png">
53            <p>Ruby</p>
54          </div>
55          <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
56        </div>
57        <div class="lesson">
58          <div class="lesson-icon">
59            <img src="https://prog-8.com/images/html/advanced/php.png">
60            <p>PHP</p>
61          </div>
62          <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
63        </div>
64      </div>
65    </div>
66  </div>
67</body>
68</html>

css
1コード/* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17a {
18  text-decoration: none;
19}
20
21/* ここからcssを書いていきましょう */
22.top-wrapper {
23  padding: 180px 0 100px 0;
24  background-image: url(https://prog-8.com/images/html/advanced/top.png);
25  background-size: cover;
26  color: white;
27  text-align: center;
28}
29
30.container {
31  width: 1170px;
32  padding: 0 15px;
33  margin: 0 auto;
34}
35
36.top-wrapper h1 {
37  opacity: 0.7;
38  font-size: 45px;
39  letter-spacing: 5px;
40}
41
42.top-wrapper p {
43  opacity: 0.7;
44  margin-bottom: 15px;
45}
46
47.signup {
48  background-color: #239b76;
49  margin-top: 15px;
50  margin-bottom: 15px;
51}
52
53.facebook {
54  background-color: #3b5998;
55  margin-right: 10px;
56}
57
58.twitter {
59  background-color: #55acee;
60}
61
62.btn {
63  padding: 8px 24px;
64  color: white;
65  display: inline-block;
66  opacity: 0.8;
67  border-radius: 4px;
68}
69
70.btn:hover {
71  opacity: 1;
72}
73
74.fa {
75  margin-right: 5px;
76}
77
78header {
79  height: 65px;
80  width: 100%;
81  background-color: rgba(34, 49, 52, 0.9);
82  position :fixed;
83  top: 0;
84  z-index: 10;
85}
86
87.logo {
88  width: 124px;
89  margin-top: 20px;
90}
91
92.header-left {
93  float: left;
94}
95
96.header-right {
97  float: right;
98  background-color: rgba(255, 255, 255, 0.3);
99  transition: all 0.5s;
100}
101
102.header-right:hover {
103  background-color: rgba(255, 255, 255, 0.5);
104}
105
106.header-right a {
107  line-height: 65px;
108  padding: 0 25px;
109  color: white;
110  display: block;
111}
112
113.lesson-wrapper {
114  height: 580px;
115  background-color: #f7f7f7;
116  text-align: center;
117}
118
119.heading {
120  padding-top: 80px;
121  padding-bottom: 50px;
122  color: #5f5d60;
123}
124
125.heading h2 {
126  font-weight: normal;
127}
128
129.lesson{
130  float: left;
131  width: 25%;
132}
133
134.lesson-icon {
135  position: relative;
136}
137
138.lesson-icon p {
139  position: absolute;
140  top: 44%;
141  width: 100%;
142  color: white;
143}
144
145.text-contents {
146  width: 80%;
147  display: inline-block;
148  margin-top: 15px;
149  font-size: 13px;
150  color: #b3aeb5;
151}

sousuke

2018/04/15 13:12

「何が違うかわからない」とはどういうことですか？ぱっとみでもhtmlからして全然違います。関係ないソースが多すぎます。要点を絞ってください。

m.ts10806

2018/04/16 00:30

タグにあるRuby on Rails はどのように関係しているのでしょうか。

m.ts10806

2018/04/16 00:31

不正解のコードをどうにかするより、どうして正解のコードで実現できるのかを調べて考えた方がいい気がします。

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

回答2件

これで正解になりますか？

html
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8">
6  <title>Progate</title>
7  <link rel="stylesheet" type="text/css" href="stylesheet3.css">
8  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9  <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
10</head>
11
12<body>
13  <!-- ここにコードを書いていきましょう -->
14  <div class="top-wrapper">
15    <div class="container">
16      <h1>LEARN TO CODE.
17        <br> LEARN TO BE CREATIVE.</h1>
18      <p>progateはオンラインプログラミング学習サービスです。
19        <br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
20      <a href class="btn signup">新規登録はこちら</a>
21      <p>
22        or
23      </p>
24      <a href="#" class="btn facebook">
25        <span class="fa fa-facebook"></span>facebookで登録</a>
26      <a href="#" class="btn twitter">
27        <span class="fa fa-twitter"></span>twitterで登録</a>
28    </div>
29  </div>
30  <header>
31    <div class="container">
32      <div class="header-left">
33        <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
34      </div>
35      <div class="header-right">
36        <a href="#" class="login">ログイン</a>
37      </div>
38    </div>
39  </header>
40  <div class="lesson-wrapper">
41    <div class="container">
42      <div class="heading">
43        <h2>Learn Where to Get Started!</h2>
44      </div>
45      <div class="lessons">
46        <div class="lesson">
47          <div class="lesson-icon">
48            <img src="https://prog-8.com/images/html/advanced/html.png">
49            <p>HTML＆CSS</p>
50          </div>
51          <div class="text-contents">
52            <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
53          </div>
54        </div>
55        <div class="lesson">
56          <div class="lesson-icon">
57            <img src="https://prog-8.com/images/html/advanced/jQuery.png">
58            <p>JQuery</p>
59          </div>
60          <div class="text-contents">
61            <p>素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
62          </div>
63        </div>
64        <div class="lesson">
65          <div class="lesson-icon">
66            <img src="https://prog-8.com/images/html/advanced/ruby.png">
67            <p>Ruby</p>
68          </div>
69          <div class="text-contents">
70            <p>オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
71          </div>
72        </div>
73        <div class="lesson">
74          <div class="lesson-icon">
75            <img src="https://prog-8.com/images/html/advanced/php.png">
76            <p>PHP</p>
77          </div>
78          <div class="text-contents">
79            <p>HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
80          </div>
81        </div>
82      </div>
83    </div>
84  </div>
85</body>
86</html>
87

css
1コード* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17a {
18  text-decoration: none;
19}
20
21/* ここからcssを書いていきましょう */
22.top-wrapper{
23  background-image:url(https://prog-8.com/images/html/advanced/top.png);
24  padding:180px 0 100px 0;
25  background-size: cover;
26
27}
28
29.container{
30  color: white;
31  text-align: center;
32  margin: 0 auto;
33  width: 1170px;
34  padding: 0 15px;
35}
36
37.top-wrapper h1{
38  font-size: 45px;
39  opacity: 0.7;
40  letter-spacing: 5px;
41}
42
43.top-wrapper p{
44  opacity: 0.7;
45  margin-bottom: 15px;
46}
47
48.signup{
49 background-color: #239b76;
50 margin-top: 15px;
51 margin-bottom: 15px;
52}
53
54.facebook{
55  background-color: #3b5998;
56  margin-right: 10px;
57}
58
59.twitter{
60  background-color: #55acee;
61}
62
63.btn{
64  padding: 8px 24px;
65  color: white;
66  display:inline-block;
67  opacity:0.8;
68  border-radius: 4px;
69}
70
71btn:hover{
72  opacity: 1;
73}
74
75.fa{
76  margin-right: 5px;
77}
78
79header{
80  width: 100%;
81  height: 65px;
82  background-color: rgba(34,49,52,0.9);
83  position :fixed;
84  top: 0;
85  z-index: 10;
86}
87
88.logo {
89  width: 124px;
90  margin-top: 20px;
91}
92
93.header-left {
94  float: left;
95}
96
97.header-right {
98  float: right;
99  background-color: rgba(255, 255, 255, 0.3);
100  transition: all 0.5s;
101}
102
103.header-right:hover {
104  background-color: rgba(255, 255, 255, 0.5);
105}
106
107.header-right a {
108  line-height: 65px;
109  padding: 0 25px;
110  color: white;
111  display: block;
112}
113
114
115.lesson-wrapper {
116  height: 580px;
117  background-color: #f7f7f7;
118}
119
120.heading{
121  padding-top: 80px;
122  padding-bottom: 50px;
123  text-align: center;
124  color: #5f5d60;
125}
126
127.heading h2{
128  font-weight: normal;
129}
130
131.lesson-icon{
132  /* width: 25%; */
133  /* float:left; */
134}
135
136.lesson{
137  /* position: relative; */
138  float: left;
139  width: 25%;
140}
141
142.lesson-icon p{
143  position: absolute;
144  top: 44%;
145  width: 100%;
146  color: white;
147}
148
149.text-contents{
150  width: 80%;
151  font-size: 13px;
152  color: #b3aeb5;
153  margin-top: 15px;
154  display: inline-block;
155}