要素の配置(flex)が上手くいかない。

前提

webサイトを制作しようとしている初学者です。
独学でサイト作成の勉強をしています。
ページのevent_notificationとevent_calendarをdisplay:flex;を用いて、横に２カラム配置し、その下にarticle_containerを横幅一杯の１カラムの配置にしたいと考えています。
何卒ご回答を宜しくお願いします。

実現したいこと

display:flex;を用いて上記の配置をしたい。
event_notification、event_calendarを２カラム配置
その下に
div article_containerを１カラムで配置、表示したいと考えております。

ここに実現したいことを箇条書きで書いてください。
・２カラム、その下に１カラムの配置

エラーメッセージ

該当のソースコード

html <div class="main_container"> <div class="event_container"> <div class="event_notification"> <p>2023年 ◯◯◯</p> <p>2023年 ◯◯◯</p> <p>2024年 ◯◯◯</p> </div> <div class="event_calendar"> <p> ◯◯◯カレンダー</p> <div class="event_calendar"> <iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=2&bgcolor=%23ffffff&ctz=Asia%2FTokyo&title=%E5%80%8B%E5%B1%95%E6%97%A5%E6%99%82&showPrint=0&showTabs=0&showCalendars=0&showTz=0&src=NzlkMDNiMTRkN2FmODU2MTg5YTM2OGM1ZTY1MmQ2OTlmODU0ZDg1NjgzMGJjMjBjMDI4N2Y5YWY0OWI0NjkyNkBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&src=amEuamFwYW5lc2UjaG9saWRheUBncm91cC52LmNhbGVuZGFyLmdvb2dsZS5jb20&color=%23795548&color=%230B8043" style="border:solid 1px #777" width="100%" height="550px" frameborder="0" scrolling="no"></iframe> </div> </div> <div class="article_container"> <div class="solo_exhibition"> <p><i class="fa-solid fa-pen-to-square"></i>2022年9月20日 <span class="solo"> ◯◯◯</span></p> <h2>- ◯◯◯ Part2 -</h2> <div class="solo_exhibition_1"> <div class="solo_exhibition_photo"> <img src="../event/image/2022.9月（ ◯◯◯）.jpg" alt="個展ハガキ" width="250px" height="400px"> </div> <div class="solo_exhibition_article"> <p class="article_h1"> ◯◯◯</p> <p class="article_h1">- ◯◯◯ Part2 -</p> <div class="article_h2"><span class="article_h2_title"> ◯◯◯</span>9/23(木) 〜 25(日)</div> <p> ◯◯◯ ◯◯◯ ◯◯◯。<br> ◯◯◯ ◯◯◯ ◯◯◯ ◯◯◯ ◯◯◯</p> </div> </div> </div> <h1 class="head_exhibition__other">その他</h1> <div class="other_exhibition"> <p><i class="fa-solid fa-pen-to-square"></i>2022年12月10日 <span class="other"> ◯◯◯</span></p> </div> </div> </div> css .key_visual { background-image: url("../image/◯◯◯のコピー.JPG"); width: 100%; height: 50vh; background-repeat: no-repeat; background-position: center; } .event_notification { background-image: url("../image/table201261768_TP_V.png"); background-repeat: no-repeat; margin-left: 50px; width: 800px; height: 300px; color: #EEEEEE; border-radius: 5px; } .event_container { display: flex; } .event_notification { flex: 0.8; } .event_calendar { flex: 0.2; } .head_exhibition__solo,.head_exhibition__other { content: ""; display: inline-block; width: 65%; height: 50px; padding: 5px; padding-left: 20px; background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent); background: linear-gradient(to right, rgb(230, 90, 90), transparent); } .solo_exhibition_photo { margin-left: 50px; } .solo_exhibition_1 { display: flex; } .solo_exhibition_article { margin-left: 100px; } .article_h1 { font-size: 1.5rem; } .article_h2 { font-size: 1.5rem; } .article_h2 { position: relative; padding: 1.2rem; width: 80%; font-weight: 300; color: #555555; background: #fff; border: 2px solid #f09199; box-shadow: 0 0 5px 2px #fce2c4 inset; } .article_h2_title { position: absolute; padding: 0 .5em; left: 20px; top: -15px; font-weight: bold; background-color: #fff; color: #140e0f; } .right_container { text-align: center; } .right_container p { margin: 0; } .event_calendar { margin-top: 10px; }

試したこと

event_notification、event_calendarの親要素にdisplay:flex;をあてました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。