PC上でページを縮小した時にヘッダーのリストが崩れてしまいます。ページが拡大した時と同じように、縮小時もリストのテキストが折り返されずに一直線に表示されるようにしたいのですが。どうしたらよいのでしょう

Question

前提・実現したいこと

初めてのページをＨＴＭＬ・ＣＳＳを使って作成しました。
ヘッダー部分に<li>形式でテキストを載せているのですが、そのテキストがウィンドウを縮小すると折り返されてヘッダーからはみ出して表示されてしまいます。どうしたらウィンドウのサイズに左右されずに一直線に表示されるようにできるのでしょうか？

発生している問題・エラーメッセージ

<li>のテキストがウィンドウのサイズを縮小するとはみ出る。 ### 該当のソースコード

css
header {
height: 80px;
background-color: black;
color: white;
position: fixed;
top: 0px;
z-index: 10;
width: 100%;
}

.header-list li {
float: left;
font-size: 30px;
padding: 20px;
}

試したこと

このカッコ内にwidth: 100%;を足してみたのですが、結果的にすべてのテキストがヘッダーの行からはみ出してしまいました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[okina]

コードの記載形式を修正してください。Code形式で記載するという項目があります。

加えて、htmlも記載をお願いします。

[relax-hero]

ありがとうございます。了解ですCode形式勉強不足でした。
HTMLの記載もさせていただきます。

Answer 1

このように変更するとどうでしょうか。

header {
  height: 80px;
  background-color: black;
  color: white;
  position: fixed;
  top: 0px;
  z-index: 10;
  width: /* 100% */ max-content;
}

コメントを受けて追記

これを追加するとどうでしょうか。

  min-width: 100%;

Comments

[relax-hero]

ご提案ありがとうございます。試してみましたが、色指定してあるヘッダー部分自体が縮小してしまいました、、(泣)

[Lhankor_Mhy]

ああ、ページ幅が大きい場合は、100%を維持したいのですね。
追記しました。

[relax-hero]

うまくいきました！！！どうもありがとうございました！！