我尝试过使用类和 ID 来更改 CSS 中的许多内容，但似乎没有任何方法可以使两个图像都位于屏幕的远端（徽标位于最左侧，个人资料位于最右侧） ）。

尝试了很多不同的东西，例如 text-align 和不同的 justify-contents 但似乎没有任何效果。

这是代码：

.top-nav {
  display: flex;
  position: absolute;
  background-color: blue;
  opacity: 0.5;
  height: 10%;
  top: 0;
  width: 100%;
  left: 0;
  padding: 0;
  border: 0;
  margin: 0;
  list-style: none;
}

.top-nav div {
  display: flex;
  justify-content: space-between;
  height: 100%;
  margin: 0px;
  padding: 0;
  border: 0;
  margin: 0;
}

<div class="top-nav">
  <div style="flex-grow: 1"><img src="/textures/logo.svg"></div>
  <div style="flex-grow: 1"><img src="/textures/profile.svg"></div>
</div>