header部分を左右に分けたい

header部分を以下の画像のように分けたいのですが、うまくいきません。
左側は出来たので、右側も同じようにしてみましたがうまくいきません。
アドバイスをお願い致します。
これを

こうしたいです。(予想月収〜はじめるを右側に表示したい)
![

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.container_header {
2  display: flex;
3  padding: 10px;
4  margin: 10px;
5}
6.img_icon {
7  width: 45px;
8  height: 45px;
9  margin-right: 2%;
10}
11.left_header {
12  font-family: sans-serif;
13  font-weight: lighter;
14  font-size: 15px;
15  margin-top: 13px;
16  color: black;
17}
18.left_header a {
19  color: black;
20}
21.left_header a:hover {
22  color: black;
23}
24.left_header a:active {
25  color: #5f9ea0;
26}
27.right_header {
28  display: flex;
29  justify-content: flex-end;
30}

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

回答1件

ベストアンサー

flexで横ならべしたアイテムの一つだけを右寄せしたい場合はmargin-left: auto;を設定するといいです。
あと、上下位置の中央寄せはalign-items: center;を使うといいでしょう。

css
1.container_header {
2  display: flex;
3  padding: 10px;
4  margin: 10px;
5}
6.img_icon {
7  width: 45px;
8  height: 45px;
9  margin-right: 2%;
10}
11.left_header {
12  font-family: sans-serif;
13  font-weight: lighter;
14  font-size: 15px;
15  color: black;
16}
17.left_header > a {
18  color: black;
19  padding: 0 10px;
20}
21.left_header a:hover {
22  color: black;
23}
24.left_header a:active {
25  color: #5f9ea0;
26}
27.left_header, .right_header {
28  display: flex;
29  align-items: center;
30}
31.right_header {
32  margin-left: auto; /*右寄せ*/
33}
34.right_header > div {
35  margin-left: auto;
36  padding: 0 10px;
37}