ヘッダーに要素が重なってくれません。

写真の「投稿一覧」リンクがヘッダーに重ならず、ヘッダーの下に来てしまいます。
重ねたいのですが、どうしたらいいででょうか？

html
1<body>
2    <header>
3      <div class="header-left">
4        <p>ChatSpot</p>
5      </div>
6      <div class="header-right">
7        <ul>
8          <li>
9            <%= link_to("投稿一覧", "/posts/index") %>
10          </li>
11        </ul>
12      </div>
13    </header>
14    <%= yield %>
15  </body>

css
1/*＝＝＝＝＝＝＝＝＝＝固定レイアウト＝＝＝＝＝＝＝＝＝＝*/
2* {
3  box-sizing: border-box;
4}
5
6* h1, h2, h3, h4, h5, h6, p, a, input, li, ul {
7  margin: 0;
8  padding: 0;
9}
10
11html {
12  height: 100%;
13}
14
15body {
16  height: 100%;
17  margin: 0;
18}
19/*＝＝＝＝＝＝＝＝＝＝ヘッダー＝＝＝＝＝＝＝＝＝＝*/
20header {
21  height: 75px;
22  width: 100%;
23  background-color: #4169e1;
24  position: absolute;
25  z-index: 1;
26}
27
28.header-left {
29  line-height: 75px;
30  margin: 0 10px;
31  color: white;
32  font-size: 45px;
33  display: flex;
34  flex-direction: row;
35}
36
37.header-right {
38  line-height: 75px;
39  margin: 0 5px;
40  display: flex;
41  flex-direction: row-reverse;
42}
43
44header li {
45  list-style: none;
46  color: white;
47  font-size: 35px;
48}

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

回答1件

ベストアンサー

display: flex;は横並べしたい要素に設定するのではなく、その親要素に設定してください。

css
1header {
2  height: 75px;
3  width: 100%;
4  background-color: #4169e1;
5  position: absolute;
6  z-index: 1;
7  display: flex;  /*追加*/
8  justify-content: space-between; /*追加 両端揃え*/
9}
10
11.header-left {
12  line-height: 75px;
13  margin: 0 10px;
14  color: white;
15  font-size: 45px;
16/*  display: flex;
17  flex-direction: row; */
18}
19
20.header-right {
21  line-height: 75px;
22  margin: 0 5px;
23/*  display: flex;
24  flex-direction: row-reverse;*/
25}