cssで複数の要素を横並びに配置したい

Question

###解決したいこと
headerタグ内の複数の要素を横並びにしたいです。

###試したこと

<header>
  <h2 onclick="location.href='/home'">Title</h2>
   <a href="#">マイページ</a>
   <a href="#">ログアウト</a>
  <hr>
</header>

header a {
  color: #777;
  margin-right: 16px;
  text-decoration: none;
  display: inline-block;
}

header h2 {
  display: inline-block;
}

上のように各要素にinline-blockを指定しましたが、a要素がh2要素の下に表示されたままです。

また、各要素にfloat: left;を指定すると横並びにはなったのですが、hr要素より下にh2要素とa要素が表示されてしまいます。

解決策が分かる方いらっしゃいましたらご教授ください。

###追記

<header>
  <h2 onclick="location.href='/home'">QuestionApp</h2>
  <div>
    <a href="/profile">マイページ</a>
    <a href="/logout">ログアウト</a>
  </div>
  <hr>
</header>

以前に作成したdivタグが残っており、実際のコードは上のようになっていました。
確認不足のためご迷惑おかけしました。

Answer 1

我が家のwindows10のchromeで上のコードをそのまま張り付けて見てみたのですが

a要素がh2要素の下に表示されたままです

この確認が出来ませんでした。
下のスクリーンショットのように横並びになっています。
エディタのプレビュー機能が働いていない、ブラウザの挙動がおかしいなどの
可能性があるのではないかと思います。

Comments

[maskmelon]

追記の通り、div要素が残っていました。
div要素にもinline-blockを設定したところ、無事横並びに表示することができました。
回答ありがとうございました。