HTML　CSSに関する質問です。

前提・実現したいこと

Progate 中級道場編での質問です。
中級道場を自力で挑戦しておりますが、ここのlesson-wrapperのところでつまづいております。
微妙なところで残念と出てしまいます。

https://image-judge-v2.prog-8.com/media/user_codes/html/dojo/2/3/518ab5b70b2fdd235a42fba31eabd04d/user_error.png?token=1603198651776

答えを見てしても上手くいきません。
お分かりになられる方がいらっしゃいましたら、ご教授お願いします。

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



CSS
.lesson-wrapper {
  height: 580px;
  text-align: center;
  background-color: #f7f7f7;
}

.heading {
  color: #5f5d60;
  padding: 80px 0 50px 0;
}

.heading h2 {
  font-weight: normal;
}


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

.lesson-icon  {
  position: relative;
}

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

.text-contents {
  width: 80%;
  display: inline-block;
  margin-top: 15px;
  font-size: 13px;
  color: #b3aeb5;
}

m.ts10806

2020/10/20 13:05

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 また、teratailはProgate専用ではありませんので、タイトルは「要件」を記載してください。 https://teratail.com/help/question-tips#questionTips3-1 ただ、過去質問に全くないとは思えません。サイト内検索活用してください。

m.ts10806

2020/10/20 13:20

コードのマークダウン対応はお願いします。 1クリックコピペできますし、コードハイライトやインデントも手元のコード通りになるので読みやすくなるのです。あと「要件」は「起きている問題」「実現したい機能」などです。タグにある単語を並べてもそれは要件にはなりません。