CSS display flexを利用したヘッダーをposition fixedで固定したいのですが

Question

以前 ヘッダーのメニューバーをロゴを左寄せ、その他のメニューを右寄せにする方法をこちらで質問させていただき回答頂いたのですができたヘッダーを縦スクロール時に固定したいのですがヘッダーをposition:fixed;にすると右寄せしていたメニューが画面の左に寄ってしまいます。position:sticky;でしたら右に寄せたメニューはそのままですがfixedの方がスクロールの挙動あっさりしているのでfixedでできればと思いますが良い方法はありますでしょうか？
参考コードは以下になります。

HTML

<header> <img src="images/dualslogo.png" alt="logo" class="dualslogo"> <ul> <li>HOME</li> <li>WORKS</li> <li>ABOUT</li> <li>CONTACT</li> </ul> </header> CSS header { background-color:aqua; display: flex; justify-content: space-between; position: fixed; }

ul{
display: flex;
list-style: none;
align-items: center;
}

li{
padding: 20px;
}

.dualslogo{
width:100px;
height:100px;

Answer 1

CSS Positioned Layout Module Level 3 によれば、 position プロパティの値が fixed で、 left, right, width プロパティが auto に設定されている場合、横幅は内容に合わせて縮小します。

§ 8.1. The width of absolute or fixed positioned, non-replaced elements

If all three of left, width, and right are auto: First set any auto values for margin-left and margin-right to 0. Then, if the direction property of the element establishing the static-position containing block is ltr set left to the static position and apply rule number three below; otherwise, set right to the static-position and apply rule number one below.

そのため、質問者さんの問題を解決するためには、明示的に width を指定するか(動作確認用リンク)、 left, right プロパティを用いる必要があります(動作確認用リンク)。

body {
  margin: 0;
}

header {
  background-color: aqua;
  display: flex;
  justify-content: space-between;
  position: fixed;
  width: 100%; /* 追加 */
}

ul {
  display: flex;
  list-style: none;
  align-items: center;
}

li {
  padding: 20px;
}

.dualslogo {
  width: 100px;
  height: 100px;
}

body {
  margin: 0;
}

header {
  background-color: aqua;
  display: flex;
  justify-content: space-between;
  position: fixed;
  left: 0; /* 追加 */
  right: 0; /* 追加 */
}

ul {
  display: flex;
  list-style: none;
  align-items: center;
}

li {
  padding: 20px;
}

.dualslogo {
  width: 100px;
  height: 100px;
}

Comments

[engineer7ah]

s8_chu様 早々のご回答ありがとうございます。
上記２つの方法でそれぞれいけました！
ありがとうございます！