なぜか要素が横並びにならない

なぜかlesson要素が横並びにならないです。原因がわからず困っております。よろしくお願いいたします。

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

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}
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189