CSSでヘッダーをposition:fixedで上部に固定するとレイアウトが崩れる

前提・実現したいこと

CSSでヘッダーをposition.fixedを使って固定したいです。
またその際に記述するCSSコードを理解しどういった事象においても、柔軟に対応できるようになりたい。
なお、当対応においては、相対的な単位を用いてどんなデバイスでも同じルールに基づいて表示できるようにしたいと考えています。

よろしくお願いします。

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

エラーメッセージ

特になし

該当のソースコード

html
1<body>
2  <header>
3    <h1>〇〇</h1>   
4    <nav class="gnav">
5      <ul>
6        <li>〇〇について
7          <ul>
8          <li><a href="#">〇</a></li>
9          </ul>
10        </li>
11      </ul>
12    </nav>
13  </header>

css
1@charset "UTF-8";
2*{
3  margin: 0;/*ブラウザ固有の余白を消す*/
4  padding: 0;/*ブラウザ固有の余白を消す*/
5}
6body{
7  padding: 0 10% 0;
8}
9
10header{
11  height: 120px;/*高さ指定*/
12  padding:0 10% 0;/*主に左右の余白設定*/
13  background-color:pink;
14  position: fixed;
15}
16




### 試したこと

position：fixed を消すと理想的な表示となるのですが、positionを使うと幅が縮小されてしまいます。
上部に固定したいために以下のことを試してみました。

body要素またはheader要素にwidth:100%;または100vw；を設定する。


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

幅を絶対値を使えば対応できるのは承知していますが、デバイスの大きさに応じて表示が対応できるよう、相対的な単位を使いたいと考えています。

widthを100vwや100%を使用すると双方とも画面をはみ出したような表示になっているので、もしかするとブラウザの表示領域？は見た目以上に広いということなのかな？なども試行錯誤する中で思いました。

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

回答1件

ベストアンサー

意図がくみ取れているか自信がないのですが、こうするとどうですか？

css
1header {
2	right: 0;
3	left: 0;
4}

投稿2021/06/24 08:35

Lhankor_Mhy

総合スコア36113

Oisan

2021/06/24 08:39

回答ありがとうございます。うまくいきました。なお、意図の汲み取りずらい投稿で申し訳ありませんでした。これは、左右の画面外の領域を0にすることで画面を出ることを防ぐということですかね？

Oisan

2021/06/24 08:41

ここで詳細が説明されていました。 https://reffect.co.jp/html/css-absolute-fiexed-diffrence

Lhankor_Mhy

2021/06/24 09:23

お役に立てたようで何よりです。 left は何も指定しないと auto になるのですが、その場合、「静的位置」に配置されます。 > 絶対位置指定要素では、要素の位置は right プロパティに基づいて決まり、 width: auto は内容物の幅に基づいて決まります。また、 right も auto であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。 https://developer.mozilla.org/ja/docs/Web/CSS/left ですので、 header { right: 0; width: 100vw; } とかでも同じ効果があると思います。

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