li 文字を横1列で表示する方法

前提

プログラミング初学者です。
liに表記している文字を横１列に表示する方法に悩んでいます。
News・展示案内の文字だけ２列に表示されてしまいます。
すべての文字を1列に表示したいです。

何卒ご回答を宜しくお願いいたします。

実現したいこと

liタグに表記している文字を横１列に表示したいです。

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

エラー表示は特にありません。

該当のソースコード

html
  <header>
    <div class="header wrapper">
      <div class="header_content">
        <div class="sitename">
          <p>画家 <span>○○○ </span> Officel Web site</p> 
        </div>
        <nav class="header_nav">
          <ul>
            <li><a href="../toppage/index.html">Top</a></li>
            <li><a href="../event/index.html">News・展示案内</a></li>
            <li><a href="../portpolio/index.html">Portpolio</a></li>
            <li><a href="../Profile/index.html">Profile</a></li>
            <li><a href="../contact/index.html">お問合せ</a></li>
          </ul>
        </nav>
        
      </div>
    </div>
  </header>

css
* {
  font-size: 100%;
  font-family: serif;
  line-height: 1.7;
  color: #333;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  width: 100%;
}

.wrapper {
  max-width: 1300px;
  margin: 0 auto;
}

/* これより下はheader */

.header_content {
  display: flex;
  justify-content: center;
}
.sitename {
  font-size: 1.5em;
  margin: 20px 0 0 20px;
}
.sitename span {
  font-size: 2em;
}

.header_nav {
  margin: 0;
}

.header_nav ul {
  display: flex;
  margin-top: 45px;
}
.header_nav ul li {
  list-style-type: none;
  padding: 10px;
  margin: 0 10px;
}
.header_nav ul li a {
  text-decoration: none;
  text-align: center;
}