Div 不正确浮动，问题似乎与脚本中已有的 css 相关联

Question

我目前正在尝试使用 HTML 和 CSS 制作一个简单的标题。我遇到了一个问题，我的按钮列表没有向右浮动，导致网站外观奇怪。

我尝试将列表浮动到右侧，将

ul

浮动到右侧，正如您在此处看到的那样，将

div

浮动到右侧。

当我只将列表添加到单独的站点中时，它实际上确实向右浮动，但一旦我粘贴到 CSS 中，它就停止了。我找不到是什么原因造成的。

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

header {
  display: inline-flex;
  background-color: grey;
  width: 110%;
  margin-left: -10px;
  margin-right: -10px;
  margin-top: -10px;
  height: 100px;
  align-items: center;
}

.logo {
  height: 100px;
  margin-top: -4px;
  font-family: "Montserrat", sans-serif;
}

ul li {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  width: max-content;
  list-style-type: none;
  display: inline;
  padding: 10px;
}

.headerButton {
  transition: 0.1s ease-in;
  color: black;
  text-decoration: none;
  font-weight: 500;
  width: 10px;
}

<header>
  <a href="https://codepen.io/ThatCanadianKid_/full/qBwgVpJ">
    <img src="https://www.kadencewp.com/wp-content/uploads/2020/10/alogo-4.png" class="logo">
  </a>
  <div style="float:right;">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</header>

如果您需要任何信息，请询问，我可能忘记了一些东西。
我对网络开发非常陌生，所以如果我的代码很糟糕，请不要把我撕成碎片。

Answer 1

发现问题是我使用的 inline-flex 不适用于浮动。