progateでposition:fixed;をするとheaderの黒バーが短くなる原因

Question

前提・実現したいこと

progateでposition:fixed;をするとheaderの黒い部分が短くなってしまいます。対処法を教えてください。
ここに質問の内容を詳しく書いてください。

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

エラーメッセージ

該当のソースコード

ソースコード

header{
background-color:rgba(34,49,52,0.9);
height:65px;
width:100px;
position:fixed;
top:0;
z-index:10;
}
.header-left{
float:left;
}
.logo{
margin-top:20px;
width:124px;
}
.header-right{
float:right;
background-color:rgba(255,255,255,0.3);
transition:all 0.5s;
}
.header-right:hover{
background-color:rgba(255,255,255,0.5);
}
.header-right a{
color:white;
display:block;
line-height:65px;
padding:0px 25px;
}

試したこと

全コードは答えと会ってました。

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

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

Comments

[kyoya0819]

HTMLをご提示ください。

Answer 1

まず、コードを提示する場合はMarkDown記法を使用してください。コードが非常に見えづらいです。

全コードは答えと会ってました。

感じも間違えている様ですし、少し雑な所が目立っている様にも見えます。
回答者が回答をする訳ですから、せめて一度読み返すなりしてください。回答がつかない理由にもなり得ます。

対処法を教えてください。

小さいなら、widthの指定値を大きくするとかです
おそらく、position:fixed;が原因ではないかと。
positonは下記をみてもわかるのですが、位置を指定するのであって大きさを指定するものではありません。
位置に問題があるのであれば、指定すれば良いのでしょうか？

positionプロパティとは文書内で要素がどのように配置されるかを設定します。

要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。ビューポートによって定められた初期の包含ブロックに対して相対配置されますが、祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。最終的な位置は top, right, bottom, left の値によって決定されます。

出典： MDN

header{
background-color:rgba(34,49,52,0.9);
height:65px; //高さを65pxに指定
width:100px; //横幅を100pxに指定
position:fixed;
top:0;
z-index:10;
}
.header-left{
float:left;
}

インデントやプロパティと宣言にはスペースを開けた方が方が良いかと。。
（これって推奨されてたり、強制されてましたっけ？）

//例
body {
  margin: 0; 
}

//記述方法の例

/* 
セレクター {
  プロパティ: 値;
}

*/

参考
MDNは、日本語で表記されているものもあり、最初は比較的読みやすく敷居も低い為リファレンスタグする時にお勧めです。
信頼性などおとってしまう部分もあるのですが、比較的信頼しても良いサイトだと思いますよ。

Comments

[ryo11]

widthを100%にしたら治りました。ありがとうございました。
次からコードの提示方法を分かりやすく記述したいと思います。
ご指摘ありがとうございました。

[退会済みユーザー]

解決した様で何よりです。
widthを100%は100%とある様に表示領域の横幅を全て使うイメージを持っていただければ良いと思います。

Answer 2

headerのwidthが100pxになっているので100%にしてみてはいかがでしょうか、

Comments

[ryo11]

解決しました。ありがとうございました。