float:left;が効かない

progateの中級道場コース（お手本のサイトを目指して、自分でいちから作っていくコース）をやっていて分からなくなりました。
４つの画像要素（緑、黄、赤、青）とpタグで囲まれた文章（緑、黄、赤、青の下にそれぞれ　　ある）のまとまりを手本のように横並びしたいです。原因が分からないです。教えて下さい。

　自分でやってみた事、調べた事
lesson-iconクラスにfloat:left;と指定してみた。
→効かない→理由がわからないです。
だから調べてみた。
google検索『float 効かない　場合』
思った解決策が見当たらなかった、わからなかった。
リンク内容
 リンク内容

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

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

追記
回答からコードを修正しました。

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

回答からの指摘以外変更点

<div class="guide-parent">を削除しました。

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

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

回答1件

ベストアンサー

.guide に float: left; が付いていないのと
<div class="guide">が4つ存在しないです。

CSS
1.guide {
2  float: left;
3  width: 25%;
4}

HTML
1<div class="guide">
2  <div class="lesson-icon">
3    <img src="https://prog-8.com/images/html/advanced/html.png">
4    <p>HTML& CSS</p>
5  </div>
6  <p>ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
7</div>
8<!-- 以下３つは省略 -->