我嘗試過使用類別和 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>