ヘッダーにposition: fixed; を使用するとレイアウトが崩れてしまう

Question

前提・実現したいこと

HTML＆CSSでLP製作を実施しています。
ヘッダーの固定をするべく、position: fixed; プロパティを使用したところ、ヘッダーのレイアウトが崩れてしまいました。
クロームのディベロッパーツールを使用してCSSの状況を確認してみましたが、別のプロパティが打ち消されているわけではないようで、原因がつかめておらず困っています。原因が分かる方がいらっしゃいましたら、ご教授頂けますと幸いです。

プロパティfikedを使用して達成したいレイアウトは以下の画像の通りです。

現状 position: fixed;を使用すると以下のようにレイアウトが崩れてしまいます。

ソースコードは以下の通りです。

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

該当のソースコード

<header>
    <div class="headerContainer">
    <div class="flexContainer">
        <div class="headerFlexLeft"> <!--flex対象1-->
            <p class="headerTitle">バンコクのノマドエンジニア育成講座</p>
            <div class="headerLogo"></div>
        </div>
        <div class="headerFlexRight"> <!--flex対象2-->
            <div class="document pc-none"></div>
            <p class="documentRiquest pc-none">資料請求</p>
            <p class="documentRiquest sp-none">お問い合わせ/資料請求はこちら</p>
        </div>
    </div>
    </div> <!--headerFlex-->
</header>



```CSS
header{
    position: fixed;
}

.flexContainer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 1190px;
    margin: 0 auto;
}

.headerTitle{
  padding-top: 10px;
  padding-left: 10px;
  font-size: 10px;  
}

.headerLogo{
    background-image: url(../images/isaralogo.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 32px;
    width: 100px;
    margin-left: 10px;
    margin-top: 5px;
}

.headerFlexRight{
  width: 75px;
  height: 65px;
  background-color: #D96B64;
}

.document{
    background-image: url(../images/form.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 10px;
    margin-left: 28px;
    height: 25px;
}

.documentRiquest{
    text-align: center;
    font-size: 12px;   
    color: white;
    margin-top: 5px;
}

.sp-none{
    display: none;
}

### 試したこと


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

Answer 1

絶対配置にすると親要素から切り離されてしまうので、横幅を決めないと縮んでしまいます。ここでの100%は親要素（body）の横幅を基準としたパーセンテージになります。

header{
  position: fixed;
  width: 100%; /*追加*/
}

Comments

[teruhisashibuya]

ご回答ありがとうございます。
fikedプロパティに関する情報まで頂きありがとうございました！

Answer 2

自分も以前同じようにヘッダーにposition:fixedを利用した際は、cssでの同じ要素の中に追加でwidth:100vwを使用して解決しました。
もしかしたら、position:fixedを使用するとブラウザがその要素の表示位置を、その要素に対する親の要素の中の絶対位置と判断してしまうからこのような現象が起こるのかもしれません。
positionに関してもっと知りたければこの記事が良いかもしれません。

CSSのpositionを総まとめ！absoluteやfixedの使い方は？

Comments

[teruhisashibuya]

ご回答ありがとうございました。
添付のURLで勉強していみたいと思います！