Your html structure is wrong. Do not put header__menu and header__menu-mobile inside the logo div. Attached my codepen screenshot after the fix.

<header>
  <nav class="header__nav">
    <div class="header__logo">
      ....
    </div>

    <ul class="header__menu">
      ....
    </ul>

    <ul class="header__menu-mobile">
     ....
    </ul>
  </nav>
</header>

Remove flex: 1; from header logo and apply below styles.

.header__menu {
  display: flex;
  margin: 0;
  padding: 0;
}

.header__menu li {
  margin-left: 20px;
}