floatを使って要素を横並びにしたい【progate HTML＆CSS道場コース中級編】

前提・実現したいこと

progateのHTML＆CSS道場コース中級編にて、下記のような横並びのアイコンを作っています。４つの要素のwidthを25％ずつにしてfloat:leftにしているのですが、どうしても横並びになってくれません。検証画面や見本のソースコードを見たりググったりして原因を探ってみたのですが、解決に至らずかれこれ２〜３時間が経過してしまいました。大変初歩的な質問かもしれませんが、ご教授お願いします。

↓見本

↓現在の状況

該当のソースコード

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

CSS
1
2
3
4html, body,
5ul, ol, li,
6h1, h2, h3, h4, h5, h6, p, div {
7  margin: 0;
8  padding: 0;
9}
10
11body {
12  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
13}
14
15li {
16  list-style: none;
17}
18
19a {
20  text-decoration: none;
21}
22
23.top-wrapper{
24  background-image:url(https://prog-8.com/images/html/advanced/top.png);
25  background-size:cover;
26  padding-top:180px;
27  padding-bottom:100px;
28  text-align:center;
29}
30
31.top-wrapper h1{
32  color:white;
33  opacity:0.7;
34  text-align:center;
35}
36
37.top-wrapper p{
38  color:white;
39  opacity:0.7;
40  text-align:center;
41}
42
43.top-wrapper h1{
44  font-size:45px;
45  font-weight:bold;
46  letter-spacing:5px;
47}
48
49.top-wrapper a{
50  display:inline;
51  text-align:center;
52}
53
54.top-wrapper p{
55  margin-bottom:30px;
56}
57
58header{
59  background-color:rgba(34,49,52,0.9);
60  width:100%;
61  position:fixed;
62  top:0px;
63  z-index:10;
64}
65
66.header{
67  width:1170px;
68  height:65px;
69  margin:0 auto;
70}
71
72.header a{
73  background-color:rgba(255,255,255,0.3);
74  color:white;
75  float:right;
76  padding:0px 25px;
77  transition:all 0.7s ease;
78  line-height:65px;
79}
80
81header a:hover{
82  background-color:rgba(255,255,255,0.6);
83  cursor:pointer;
84  
85}
86
87.header img{
88  width:124px;
89  margin:20px 0px;
90  line-height:65px;
91}
92
93
94
95.btn{
96  color:white;
97  opacity:0.8;
98  padding:14px 24px;
99  border-radius:5px;
100}
101
102.btn:hover{
103  opacity:1;
104  cursor:pointer;
105}
106
107.btn-contents{
108  padding-top:30px;
109  text-align:center;
110}
111
112.btn-contents p{
113  margin:15px 0px;
114}
115
116.new{
117  background-color:#239b76;
118}
119
120.facebook{
121  background-color:#3b5998;
122}
123
124.twitter{
125  background-color:#55acee;
126  margin-left:10px;
127}
128
129.lesson-wrapper{
130  height:580px;
131  text-align:center;
132  background-color:#f7f7f7;
133}
134
135.lead-text{
136  font-weight:normal;
137  font-size:30px;
138  color:#5f5d60;
139  text-align:center;
140  padding-top:80px;
141  padding-bottom:50px;
142}
143
144
145
146.lessson{
147  width:25%;
148  float:left;
149  
150}
151
152.lesson-icon p{
153  color:white;
154  position:absolute;
155  top:50%;
156  left:50%;
157  -ms-transform: translate(-50%,-50%);
158  -webkit-transform: translate(-50%,-50%);
159  transform: translate(-50%,-50%);
160  margin:0;
161  padding:0;
162  
163}
164
165.lesson-icon{
166  position:relative;
167  
168}
169
170.text-lesson{
171  color:#b3aeb5;
172  font-size:13px;
173  margin-top:15px;
174  width:80%;
175  display:inline-block;
176}