jQueryで追加したposition:fixedのwidthがはみ出す、要素が透過してしまいます

Question

前提・実現したいこと

scss、jQueryでヘッダーの固定をしたいです。

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

スクロールしてある一定のところにきたときに、jsでヘッダーにposition:fixedをつけます。しかし、スクロールした瞬間ににヘッダーが透過してしまう、ヘッダーのwidth親要素のwidthをはみ出します。

エラーメッセージ

該当のソースコード

<div class="container-wrapper">
    <header>
        <div class="header-logo">
            <img src="/img/logo.png" alt="">
        </div>

        <nav>
            <ul>
                <li><a href="#"><span class="first-child">card</span></a></li>
                <li><a href="#">news</a></li>
                <li><a href="#">price</a></li>
                <li><a href="#">access</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </nav>
    </header>
</div>

body {
  font-family: Yu Gothic;
  font-weight: bold;
  width: 1366px;
  margin: 0 auto;

header {
width: 100%;
height: 100px;
background: #3F51B5;
overflow:hidden;
box-sizing: border-box;
opacity: 1;


.header-logo {
position: relative;
top: 31px;
bottom: 30px;
left: 140px;
width: 200px;
height: 39px;
opacity: 1;
margin-right: 0;
}

nav {
position: absolute;
top: 40px;
left: 882px;
width: 344px;
height: 26px;
opacity: 1;
float: right;


}
ul {
letter-spacing: 0;
opacity: 1;
display: flex;
list-style: none;
margin: 0;
padding: 0;
font-weight: normal;
}
li a{
  margin-right: 24px;
  text-transform: capitalize;
  color: #FFFFFF;
  text-decoration: none;
}
.first-child{
  text-decoration: underline red;
  margin-top: 0.5px;
}

}
}

window.addEventListener('DOMContentLoaded', function(){
    var header = $("header").offset().top;
    $(window).scroll(function(){
        if($(window).scrollTop() > header){
            $("header").css("position","fixed");
        }
    });
});

試したこと

headerにbox-sizing: boder-boxに指定したり、hedaerに親要素をつけてpositionの指定等やってみましたが、全てうまくいきませんでした。
どうぞ、よろしくお願い致します。

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

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

Answer 1

position:fixedは通常のフローから除外されるので、親のwidthを引き継ぎません。内包要素にmax-widthを指定するなどしてください。

【position - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/position#fixed

要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。

Comments

[kaaaarin]

早速の回答、ありがとうございます。
headerのwidth:100%→max-width:1366pxにしたところ、widthが100pxで表示されてしまいました．．
どうしてでしょうか？
しつこく、申し訳ございません。よろしくお願い致します。

[kei344]

headerのwidth:100%のまま内包要素にmax-widthを付けるか、headerの外側にwidth:100%の要素を作ってposition:fixedをそっちに割り当て、headerにmax-width:1366pxするかどちらかです。

[kaaaarin]

後方のやり方で解決しました。本当にありがとうございました。

Answer 2

要素が透けることに関しては、.container-wrapperにz-indexをつけて解決しました。