ヘッダーから<a>要素がはみ出る

Question

前提・実現したいこと!

Progateでヘッダーを作成しています。
ヘッダー要素の中にログインのリンクを作成しなければいけない。

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

ログインの表示が
なぜかヘッダーの範囲からはみでて表示されます。
どうすればヘッダー要素の中に表示させることができますか？

該当のソースコード

HTML&CSS

【index.html】

<header> <div class="container"> <div class="header-left"> <img src="https://prog-8.com/images/html/advanced/main_logo.png" class="logo"> </div> <div class="header-right"> <a href="#" class="login">ログイン</a> </div> </div> </header>

【styleseet.css】
header{
background-color:rgba(34,49,52,0.9);
}
.logo{
width:124px;
padding:20px 0;
}
.header-right a{
padding:0 25px;
float:right;
display:block;
color:white;
line-height:60px;
transition:all 0.5s;
background-color:rgba(255,255,255,0.3);
}
.header-right a:hover{
background-color:rgba(255,255,255,0.5);
}

試したこと

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

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

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
また、画面は写真ではなく画面キャプチャにしてください(それにエディタ表示を見せる以外の用途ではコードを画像で提示するのは意味がありません)
自身が試したこと調べたことも具体的に記載してください。
質問は編集できます。

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
また、画面は写真ではなく画面キャプチャにしてください(それに”””エディタ表示を見せる以外の用途ではコードを画像で提示するのは意味がありません”””)
自身が試したこと調べたことも具体的に記載してください。（2回目）

Answer 1

.header-left に必要な記述（たぶんfloatの指定）が無いからでは。