ヘッダーを固定する際に要素がズレてしまいます。

Question

前提・実現したいこと

CSSで"position: fixed;"によりヘッダーを固定したのですが、header-rightのリストがheader-left(タイトル)のすぐ隣に来てしまいます。
（親要素：header、子要素：header-right、header-left）
header-rightを画面右端に残したままヘッダーを固定したいのですが、どなたかお知恵を拝借願えませんでしょうか。

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

該当のソースコード

<header>
      <div class="container">
        <div class="header-left">
          <h1 class="title">Bangkok Health Massage</h1>
        </div>
        <div class="header-right">
          <a href="#" style="text-decoration: none;">Top</a>
          <a href="#" style="text-decoration: none;">Flow</a>
          <a href="#" style="text-decoration: none;">Company</a>
          <a href="#" style="text-decoration: none;">Contact</a>
          <a href="#" class="btn faceook"><i class="fab fa-facebook-square"></i></a>
        </div>
      </div>
    </header>

header {
  position: fixed;
  top: 0px;
  background-color: rgba(255,255,255,0.6);
  height: 70px;
  z-index: 10;
}

.header-left {
  float: left;
  right: 0;
}

.header-right {
  float: right;
  left: 0;
  line-height: 70px;
  font-size: 20px;
  text-shadow: 1.5px 0.5px 0.5px #000000;
}

試したこと

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

当方、HTML & CSSの知識しか持ち合わせておりません。

Comments

[kszk311]

現状のソースコードを追記してもらえますか。

[punchan36]

有難うございます。ソースコードを追記致しました。宜しくお願い致します。

[kei344]

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

[kszk311]

ソースは<code>ボタンで、HTML、CSSごとに囲んでもらえると助かります。

[punchan36]

初めての質問でして、お手数をおかけして大変申し訳ありません。

Answer 1

.header-rightにfloat: rightがかかっているので、headerの幅を100%にすれば、右よせになります。

header {
	width: 100%;
}

text-shadowの分、右側にはみ出してしまうので、適当に余白つけておくといいかなと思います。

.header-right a {
	display: inline-block;
	margin-right: 10px;
}

Comments

[punchan36]

ご丁寧に教えて下さり、またアドバイスまで下さり有難うございます！
今日かなりの時間をこの箇所に費やしておりましたので、感動致しました。
またご縁がありましたら宜しくお願い致します！

Answer 2

header {
  right: 0;
  left: 0;
}

Comments

[punchan36]

有難うございます！！！