floatを指定するとヘッダーの上に空白が出現してしまう

前提・実現したいこと

ProgateのHTML＆CSS道場コース（中級編２）にてホームページのヘッダー部分を作成しています。
**ログインリンクにfloat:rightを指定した際に、ヘッダーの上に1px程の謎の空白が出現してしまいます。この空白をなくすにはどうしたらよいでしょうか。**以下がヘッダー部分のHTMLとCSSのコードになります。

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

header-right　に　float: right　を指定するとヘッダー部分の上に空白が出現する。

該当のソースコード

HTML
1<header>
2    <div class="container">
3      <div class="header-left">
4        <div class="logo">
5          <img src="https://prog-8.com/images/html/advanced/main_logo.png">
6        </div>
7      </div>
8      <div class="header-right">
9        <a href="#" class="login">ログイン</a>
10      </div>
11    </div>
12  </header>
13
14```CSS
15header {
16  height: 65px;
17  background-color: rgba(34,49,52,0.9);
18}
19
20.header-left {
21  float: left;
22  height: 60px;
23}
24
25.logo img {
26  width: 124px;
27  margin-top: 20px;
28}
29
30**.header-right {
31  float: right;
32}**
33### 試したこと
34
35・headerに対してheightを指定した
36→変化なし
37
38・headerに対してmargin-top: 0;を指定した。
39→変化なし
40
41・.header-right { と　float: right;　の間の行に何か文字を入力
42→空白は無くなったがコードとしておかしい
43
44### 補足情報（FW/ツールのバージョンなど）
45
46ここにより詳細な情報を記載してください。