position:fixed;によるヘッダーの左右のずれ

Question

HTML,CSSを学習中です。

ホームページのヘッダーをposition:fixed;で固定したいですが、
コードを記入するとヘッダーの中の要素が左側に寄ってしまいます。

<header>
    <div class="header">
      <div class="header-wrapper">
        <div class="header-logo">
          <span>TITLE</span>
        </div>
        
        <div class="header-contents">
          <span>content1</span>
          <span>content2</span>
          <span>content3</span>
          <span>content4</span>
          <span>content5</span>
        </div>
        
      </div>
      
    </div>
</header>

.header-wrapper{
  width:1170px;
  margin: 0px auto;
}

次のコードを加えると、下図のように左に寄ってしまいます。

.header-wrapper{
position:fixed;
}

ご回答よろしくお願いします。

追記
このコードで実現したいことは、ヘッダーの中身を左端に寄せずやや中央へ配置しつつ、ページをスクロールしてもヘッダーは動かないように固定することです。

Comments

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[imuzi.ayustet]

修正しました。

Answer 1

position:fixedによりmargin設定が無効化されています.

当該要素が中央揃えとなるようにleft値にcalc関数を用いた(動的な)計算結果を指定して下さい.

<header>
	<div class="header-wrapper">
		<div class="header-logo">
			<span>TITLE</span>
		</div>
		<div class="header-contents">
			<span>content1</span>
			<span>content2</span>
			<span>content3</span>
			<span>content4</span>
			<span>content5</span>
		</div>
	</div>
</header> 

.header-wrapper{
	background-color:yellow;
	width: 500px;
	position: fixed;
	left: calc((100% - 500px) / 2);/*(全体幅-要素幅)/2が余白*/
}

NOTE:
position: stickyを使う方法も考えました. が, この場合はどの要素をどの要素に引っ付けるか?が重要となるため, 要素の位置を無条件にビューポートに固定する用途においてはposition: fixedの方が適しています.

header{
	position: sticky;
	top: 0; 
}
.header-wrapper{
	background-color:yellow;
	width: 500px;
	margin: 0px auto;
}
/*
headerをその親要素にひっつけているので, 
親要素がスクリーンから見えなくなるとheader子要素も見えなくなる
*/

Comments

[imuzi.ayustet]

calc,ビューポートなど知らない知識が多くありました。
使いこなすのは少し難しそうですが、勉強になりました。
ご回答ありがとうございます。

Answer 2

ご提示のコードでは細部が不明なので推測になりますが、単純に「header-wrapper」がディスプレイの中央から「position:fixed;」により左上端に寄っただけだと思います。

「header-logo」「header-contents」にtext-align: center;は入っていますか？

-追記-
固定方法が無かったですねスミマセン。
「header-wrapper」を中央・上端で固定したい場合、以下を試してみて下さい。

.header-wrapper{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
　width: 1170px;
}

Comments

[imuzi.ayustet]

書いていただいたコードを記載したら望んだ結果が得られたため、ベストアンサーにさせていただきました。
ありがとうございます。

[yoshinavi]

解決されて何よりです。
(^^)

[yukiko-yukiko]

コメント失礼いたします
私も同じ問題が起きていまして、
今試してみたところ 解決しました! とても嬉しいです ありがとうございます!

Answer 3

.header-wrapperを下記CSSにしてみて下さい。

.header-wrapper {
  left: 0;
  position: fixed;
  right: 0;
  width:1170px;
}

Comments

[imuzi.ayustet]

参考にさせていただきました。
ご回答ありがとうございます。