headerタグの左右の分け方について

ヘッダー部分を左右に分けたいのですがうまくいきません。
以下の画像の感じに分けたいと思い、ブートストラップやflex-endを使っているのですが、なぜflex-endが機能していないのでしょうか？
ご回答の程、よろしくお願い致します。
現在の状況はこんな感じです。

これを

こんな風にしたい

HTML
1<header>
2    <nav class="container_header">
3      <img src="../img/icon.png" alt="トップ画像" title="トップ画像" class="img_icon">
4      <div class="left_header">
5        <a href="#" class="col-1">概要</a>
6        <a href="#" class="col-1">準備</a>
7        <a href="#" class="col-1">安全</a>
8        <a href="#" class="col-1">マネープラン</a>
9      </div>
10      <div class="right_header">
11        <div class="col-4">予想月収</div>
12        <div class="col-4">¥244,628</div>
13        <div class="col-4">はじめる</div>
14      </div>
15    </nav>
16  </header>

CSS
1@charset "UTF-8";
2
3html {
4  font-size: 100%;
5}
6
7.container_header {
8  display: flex;
9  padding: 10px;
10  margin: 10px;
11}
12.img_icon {
13  width: 45px;
14  height: 45px;
15  margin-right: 2%;
16}
17.left_header {
18  font-family: sans-serif;
19  font-weight: lighter;
20  font-size: 15px;
21  margin-top: 13px;
22  color: black;
23}
24.left_header a {
25  color: black;
26}
27.left_header a:hover {
28  color: black;
29}
30.left_header a:active {
31  color: #5f9ea0;
32}
33.right_header {
34  display: flex;
35  justify-content: flex-end;
36}

行動規範の内容に同意します

回答1件

ベストアンサー

.right_header { justify-content: flex-end; } この指定は、right-headerがflexコンテナーで、その中にある各divが、right_headerの中で右寄せになるようにしています。
実際にこの指定は生きています。下記のコードで動いていることがわかると思います。

css
1.right_header {
2  display: flex;
3  justify-content: flex-end;
4  width: 300px;
5  background-color: yellow;
6}

あなたが必要としているのはheaderの中の要素を2つに分けることではなく（まあそのようにしても実現可能ではありますが）、div.left_header が目一杯横幅を取るようにすることです。結果として img と div.right_header はそれぞれ左右の端に追いやられることになります。

css
1.left_header {
2  font-family: sans-serif;
3  font-weight: lighter;
4  font-size: 15px;
5  margin-top: 13px;
6  color: black;
7  flex-grow: 1; /* ← この行を追加 */
8}