html - ページ全体に収まるように固定要素の幅を設定するにはどうすればよいですか?

Question

これはhtmlファイルです：

これはcssファイルです：

これにより、次の結果が生成されます。

幅がフッターの幅になるようにヘッダー クラスを設定するにはどうすればよいですか? ヘッダーの位置が固定されていなくても可能ですが、位置を固定すると幅が設定されませんか？どうすればこれを解決できますか? 下にスクロールしても動かないようにヘッダーを修正する必要があります。

[編集] 幅を 100% に変更した結果は次のとおり です。100% に設定すると、ヘッダーの左側にわずかな余白が表示され、右側には何も表示されないのは私のブラウザーだけですか?

Answer 1

以下をヘッダークラ​​スに追加するとうまくいくはずです...

width: 100%;

ヘッダーを固定位置に設定することで、ページの自然な流れから外します。そのため、親 () の幅を自動的に埋めるのではなく、デフォルトでコンテンツの幅になります。

Answer 2

ただ行う：

.header{
width: 100%;
z-index: 1;
border: none;
etc...
}