justify-content: space-between in Flexbox doesn't seem to work

Question

I've tried changing a lot of things in the CSS using classes and IDs, but there doesn't seem to be any way to get both images to be on the far side of the screen (logo on the far left, profile on the far right).

Tried a lot of different things like text-align and different justify-contents but nothing seems to work.

This is the code:

.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>

Answer 1

justify-content now does nothing because it is set on a div without display:flex. If you want separate divs for the images, put justify-content:space- Between on the div that contains them, i.e. the top navigation div.