CSSのFlexboxが上手く機能しない

ご覧いただきありがとうございます。

HTML＆CSSを使ってWebサイトのサンプルを作成する課題に取り組んでいます。

目標）Flexboxを利用し、パンダ画像の右側に説明文("disp")がくるようにしたい
課題）"disp"のFlexboxが上手く機能せず、パンダ画像の下側に説明文が表示される

(HTMLファイルの内容）

<html> <head> <title></title> <link rel="stylesheet" href="test.css"> </head> <body> <div class="container1"> <div class="header"> <img src="images/logo.png"></div> <div class="main"> <div class="content"> <h2>注目の動物</h2> <div class="section"> <div class="image"><img src="images/s_panda.png"></div> <div class="disc"> <h3>パンダ</h3> <p>ジャイアントパンダは、哺乳網肉食目クマ科ジャイアントパンダ属に分類される食肉類。白と黒にはっきりと分かれた体毛が際立った特徴である。</p> </div> </div> </div> <div class="sidebar"><h2>秋のペンギン祭り</h2> <p>ペンギンに会いに行こう</p> <img src="images/banner.png"> </div> </div> <div class="footer">footer</div> </div> </body> </html>

（CSSファイルの内容）
.body{
background: gray;}

.container1{
max-width: 1140px;
margin: 0 auto;
}

.header{background: #445721;
padding: 30px;
}

.main{
background: #fff;
padding: 30px;
display: flex;
}
.img{max-width: 100%;}
.content{flex: 5;}
.sidebar{flex: 2;}

.section{display:flex;}
.image{flex: 2;}
.disc{flex: 5;}

.footer{background: #333;
padding: 30px;
}

模範解答と照らし合わせを行いましたが、違いがわからず途方に暮れています。

お分かりになる方、ぜひアドバイスをいただけないでしょうか？