Flexboxを使って要素を横並びにしたいのですが横並びが適用されないです

前提・実現したいこと

最近HTML・CSSの勉強を始めたのでサイトを作ってみようと思い、本を参考にサイト制作に取り組んでいます。
そこで、不明点がありましたのでご教授いただきたいです。

ヘッダー部分に左寄せのロゴとログイン画面に遷移するためのリンクを右寄せで配置したいと思い、Flexboxを用いてロゴと「ログイン/新規登録」のリンクを横並びになるようにCSSを組んでみたところ、横並びではなく縦に並んでしまいました。
そこでchromeの検証ツールで調べてみたところ、h1タグが指定したwidthの範囲に収まらず、親要素の範囲分余白ができているように見え、それが原因でリンク部分が改行され、縦並びになったのではないかというところまでは見当がついたのですが、ネットで調べていろいろと試してみても解決ができませんでした。

初歩的な質問で恐縮ですが、解決策がありましたらご教授頂けないでしょうか。

該当のソースコード

HTML
1<header>
2	<div class="container header-container">
3		<div class="header-innner">
4			<h1 class="header-logo">
5				<a href="index.html">
6					<img src="images/test-logo.png" alt="ロゴ">
7				</a>
8			</h1>
9
10			<a href="#" class="header-login">新規登録/ログイン</a>
11
12		</div>
13	</div>
14</header>
15

該当のソースコード

CSS
1header{
2	background:#c84040;
3}
4
5.header-inner{
6	display:flex;
7	justify-content:space-between;
8	align-items: center;
9	}
10
11
12.header-logo{
13	padding:20px 0;
14	width:200px;
15	height:46px;
16}
17
18.header-login{
19	padding:10px 0;
20	width:160px;
21	height:37px;
22	font-size:12px;
23	color:#fff;
24}
25