HTML/CSS Flex反映後、右側のboxを右寄りにしたい

Question

質問失礼致します。

現在、Udemyの教材を使いコーディングの練習をしております。
教材はfloat使用なので、flexに直して学習をしておりますので、模範するものがないためここに質問させていただきます。

下記、1枚目の画像の様にオレンジ（div#teacher_list）と紫(div#course_list )のboxの間に隙間を作りたいです。
div#course_listで、margin-right: auto; または　margin-right: 0;　にしても隙間ができません。

修正点、ご教授いただけると嬉しいです！

<div id="introduction">
                <div id="wrapper">
                    <div id="introduction_title">
                        <h3>授業内容</h3>
                    </div>
　　　　　　　　　　　<div id="wrapper_flex">
　　　　　　　　　　　　　<div id="teacher_list"></div>
　　　　　　　　　　　　　<div id="course_list"></div>
　　　　　　　　　　　</div>
　　　　　　　　　</div>
</div>

div#introduction {
    width: 100%;
    height: 471px;
    background-color: pink;
}

div#wrapper {
  width: 978px;
  height: auto;
  padding: 30px 0;
  margin: 0 auto;


}

div#wrapper_flex {
  display: flex;
}

div#teacher_list {
  width: 632px;
  height: 250px;
  background-color: orange;
  padding: 15px;

}

div#course_list {
  width: 286px;
  height: 338px;
  background-color: purple;
  margin-right: 0;

}

Answer 1

落とし所がわかりませんが

div#wrapper_flex {
  display: flex;
  justify-content:space-between;
}

のような処理では？

Comments

[missy]

ご回答ありがとうございます。
margin-rightがまったく効かないのが腑に落ちませんが、justify-content:space-between;で隙間できました！
ありがとうございます。