【HTML】aタグによってレイアウトがずれてしまう

Question

左側の画像(logo.png)をaタグで囲むと、二枚目の画像のようにリンクの範囲が横に大きくなってしまい、右側のリンクが潰されて改行されてしまいます。
なぜこのように変化してしまうのか、また、この解決策をご教授ください。

aタグで囲む前

aタグで囲む後

HTML

<header>
  <a href="index.html"><img src="logo.png" alt="ロゴ"></a>
  <nav>
    <ul>
      <li><a href="time.html">営業時間</a></li>
      <li><a href="guide.html">フロアガイド</a></li>
      <li><a href="access.html">交通アクセス</a></li>
      <li><a href="sale.html">お得なポイント</a></li>
      <li><a href="corp.html">運営企業</a></li>
    </ul>
  </nav>
</header>

CSS

@charset "utf-8";
* {
    margin:0; padding:0;
    box-sizing: border-box;
}
html {
    overflow-y:scroll;
    scroll-behavior: smooth;
}
body{
    background-color: #ffffff;
    font-size: 95%;
	font-family: "BIZ UDPゴシック", Verdana, "Roboto", "Droid Sans", "游ゴシック", "YuGothic", "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
    line-height: 150%;
    color: white;
}
a{
    text-decoration: none;
    color: #eeeeee;
}
a:hover{
    text-decoration: underline;
}

/*ヘッダー*/
header {
    padding: 1% 6% 1%;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #2c2c2c;
    display: flex;
    align-items: center;
}
header img{
    margin: 0; padding: 0;
    width: 20%;
}
header a{
    display: block;
}
header a:hover{
    text-decoration: underline;
}

nav {
    margin: 0 0 0 auto;
}
ul {
    list-style: none;
    margin: 0;
    display: flex;
}
li {
    text-decoration: none;
    margin: 0 0 0 15px;
    font-size: 14px;
}

Answer 1

aリンク幅が広がってしまうのは、aリンクには幅が設定されていなくて、子要素のimgにwidth: 20%;が設定されているからですね。

ご希望のことは、ロゴ画像を画面幅の20%にして、そのうえで、aリンク幅と画像幅を同じにしたいということでしょうか。

もし、そうなら、aリンクの幅を20%にして、画像幅は100%にしてaリンク幅に合わせればいいでしょう。

header img{
    margin: 0; padding: 0;
    width: 100%;
}
header a{
  width: 20%;
}

Answer 2

親要素をFlex指定しているので自動でコンテンツ幅に収まるように伸びていますね。
要素をふやしていいなら手っ取り早いのはaタグをさらに囲んでinline要素にする感じでしょうか。

<div><a href="index.html"><img src="logo.png" alt="ロゴ"></a></div>

header a{
    display: inline;
}
コード