HTML/CSS フレックスが反映されない

HTML/CSS独学中の者で、現在模写コーディングをしています。
CSSフレックスがうまく表示されなく困っています。

オレンジ部分が右に来て、黄緑部分がオレンジの横にくるようにしたいです。
どこをどのように修正すれば、フレックスが反映されるのでしょうか？

HTML
1<body>
2        <header>
3            <div id="header_inner">
4                <h1>
5                    <img src="./images/logo.png" alt="Design Leaker">
6                </h1>
7                <nav>
8                    <ul>
9                        <li><a href="#">ウェブデザイン</a></li>
10                        <li><a href="#">WORDPRESS</a></li>
11                        <li><a href="#">JQuery</a></li>
12                        <li><a href="#">ウェブマーケティング</a></li>
13                    </ul>
14                </nav>
15            </div>
16        </header>
17        <div id="main_wrapper">
18            <div class="main_flex">
19                <div id="top_pickup">
20                    <div id="pickup_thumb">
21                    <img src="./images/pickup.jpg" alt="ピックアップ画像">
22                </div>
23                <div id="top_ranking"></div>
24            </div>
25        </div><!--main_wrapper-->
26
27    </body>

CSS
1div#main_wrapper {
2    width: 960px;
3    height: auto;
4    margin: 30px auto 0 auto;
5}
6
7div.main_flex {
8    display: flex;
9    justify-content: space-between;
10}
11
12/*---pickup---*/
13
14div#top_pickup {
15    width: 582px;
16    height: 360px;
17    background-color: orange;
18    margin-right: 0;
19}
20
21
22/*---ranking---*/
23
24div#top_ranking {
25    width: 348px;
26    height: 360px;
27    background-color: lightgreen;
28    margin-left: 0;
29}