レイアウトの崩れの修正の仕方

Question

最初の画像のように表示したいのですが、レイアウトが崩れ、３枚目のようになってしまっています。
このような現象が結構起こるのですが、なぜしょうか。　

ご回答よろしくお願い致します。

    <div class="lesson-wrapper">
      <div class="heading">
        <h2>Learn Where to Get Started!</h2>
      </div>
      <div class="lessons">
        <div class="lesson">          
          <div class="lesson-icon">
            <img src="img/html.png">
            <p>HTML & CSS</p>
          </div>
          <p class="txt-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
            <img src="img/jQuery.png">
            <p>jQuery</p>
          </div>
          <p class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
            <img src="img/ruby.png">
            <p>Ruby</p>
          </div>
          <p class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
            <img src="img/php.png">
            <p>HTML</p>
          </div>
          <p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
        </div>
      </div>  
    </div>
    <div class="message-wrapper">
      <div class="heading">
        <h3>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h3>
        <p>Let's learn to code, learn to be creative!</p>
      </div>
    </div>
  </body>
</html>

.lesson-wrapper {
  text-align:center;
  width: 1170px;
  margin: 0 auto;
}

.heading h2 {
  font-weight: normal
}

.heading {
  margin: 100px 0 80px 0;
  color: #5f5d60
}

.lesson {
  float: left;
  width: 25%;
}

.lesson-icon {
  position: relative;
}

.lesson-icon p {
  position: absolute;
  top: 90px;
  width: 100%;
  color: white;
}

.txt-contents {
  width: 80%;
  font-size: 12px;
  margin: 0 auto;
  color: rgb(51,204,204);
}

Answer 1

floatの解除を追加

.lesson-wrapper:after {
  content:"";
  clear:both;
  display:block;
}

.hedddingに中央寄せ追加

.heading {
  text-align: center;
}

Answer 2

floatが解除されていないせいです。