Progateの道場コース、中級編3・レッスン一覧部分を作ろうがどうしてもクリアできません。。

前提・実現したいこと

以下のコードなのですが、見本との見た目の違いがわからず、判定するとダメが出ます。
どうかご教示ください！

発生している問題・エラーメッセージ

エラーメッセージ
```なし

### 該当のソースコード

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


```CSS
ソースコード
``` .top-wrapper{
  background-image: url(https://prog-8.com/images/html/advanced/top.png);
  background-size: cover;
 color: white;
  text-align: center;
 }
.container{
  margin: 0 auto;
 width: 1210px;
 height: 630px; 
}

.container h1{
  font-size: 40px;
  letter-spacing: 10px;
  opacity: 0.7;
  padding: 16% 0%;
  }
.container p{
  position: relative;
  top: -185px;
 opacity: 0.7;}
.signup{
 position: relative;  
top:-140px;
left: 160px;  
background-color: #239b76;

}
.facebook{
  position: relative;
top:-50px;
left:-90px;  
background-color:  #3b5998;}
.twitter{
  position: relative;
top:-50px;
right:90px;  
background-color: #55acee;}
.btn{ 
  color: white;
padding: 10px;
border-radius: 4px;
opacity: 0.8;
}
.btn:hover{opacity:1.0;
  cursor: pointer;
}
.or{
  position: relative;
  top:-100px;
  left: 70px;
  opacity: 0.7;}
header{
   background-color: rgba(34, 49, 52, 0.9);
  position: fixed;
  color: white;
  width: 100%; 
    z-index:10;
}
.header-logo{
 width: 124px;
 padding: 20px;
  } 
.login{
  background-color: rgba(255, 255, 255, 0.3);
 position: relative;
 top: -25px;
 left: 930px;
 padding:25px;
 color: white; 
 transition: all 0.5s; }
.login:hover{
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.5)
 }
.lessons{
  height: 580px;
  width: 1170px;
 }
.lessons h2{
  text-align: center;
  padding: 80px 0px 50px 0px;
color: #5f5b60;
font-size: 25px;
font-weight: normal;
}
 
 .lesson-icon{
   position: relative;
   left:100px;
   float: left;
   width: 25%;
 }
 .lesson-text{
   color: #b3aeb5;
   font-size: 13px;
   width: 80%;
  margin-top: -10px;
 }  
 
  .lesson-name{
    color: white;
    position: relative;
    top: -110px;
   left: -50px;
    text-align: center;
     }
### 試したこと
各要素のwidth、height、z-index等を変えたりしました。

### 補足情報（FW/ツールのバージョンなど）
https://1drv.ms/u/s!AvJuJnPewtW_gjy03xy_JOOQkQKj
判定結果の画像です。
多少の相違は許されるはずなのですが、なぜクリアできないのかさっぱりわかりません。