メディアクエリにおいてflex:wrap;が機能しない件について

初投稿です。
Progate上級編の模写（リンク内容）で横幅1000px以下で.lesson部を折り返しで表現したいのですが、
flex-wrap:wrap;が機能しません。
上級編ではfloatを用いていたため、flexboxでの回答例が見られませんでした。
どなたかご教示いただけると助かります。
よろしくお願いします。

HTML
1コード
2<div class="lesson-wrapper">
3    <div class="container">
4      <div class="heading">
5        <h2>Learn Where to Get Started!</h2>
6      </div>
7        <div class="lessons">
8        
9          <div class="lesson">
10            <div class="lesson-icon">
11
12              <img src="https://prog-8.com/images/html/advanced/html.png">
13              <p>HTML&CSS</p>
14
15            </div>
16            <p class="txt-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
17          </div>
18          <div class="lesson">
19            <div class="lesson-icon">
20              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
21              <p>jQuery</p>
22
23            </div>
24            <p class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
25          </div>
26          <div class="lesson">
27            <div class="lesson-icon">
28              <img src="https://prog-8.com/images/html/advanced/ruby.png">
29              <p>Ruby</p>
30
31            </div>
32            
33            <p class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
34          </div>
35          <div class="lesson">
36            <div class="lesson-icon">
37              <img src="https://prog-8.com/images/html/advanced/php.png
38              ">
39              <p>PHP</p>
40
41            </div>
42            <p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
43          </div>
44      
45      </div>
46  </div>

css
1*{
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7.lesson-wrapper{
8  text-align: center;
9  background-color: #F7F7F7;
10  height: 500px;
11 }
12
13.container{
14  width: 100%;
15  max-width:1170px;
16  margin: 0 auto;
17  padding: 0 15px;
18}
19
20.lessons{
21  display: flex;  
22}
23
24@media(max-width:1000px){
25.lessons{
26    flex-wrap: wrap;
27  }
28  .lesson{
29    width: 50%;    
30  }
31}
32
33.heading {
34  padding-top: 80px;
35  padding-bottom: 50px;
36  color: #5f5d60;
37}
38
39.heading h2 {
40  font-weight: normal;
41}
42
43.lesson{
44  width: 25%;
45}
46
47.lesson-icon{
48  position: relative;
49}
50
51.lesson-icon p {
52  position: absolute;
53  top: 44%;
54  width: 100%;
55  color: white;
56}
57
58.txt-contents{
59  margin-top: 15px;
60  margin-bottom: 13px;
61  display: inline-block;
62  font-size: 13px;
63  color: #b3aeb5 ;
64  width: 80%;
65}