html – Justify-content: space-between does not seem operating in a flexbox

i have actually attempted altering a number of points in the css with courses as well as id’s yet absolutely nothing appears to make it to make sure that both photos will certainly get on the much side of the display (logo design on the much left as well as account on the much appropriate).

Attempted great deals of various points like text-align as well as various justify-contents yet absolutely nothing shows up to function.
Right here is the code

css

 top-nav {
display screen: flex;
setting: outright;
background-color: blue;
opacity: 0.5;
elevation: 10%;.
top: 0;.
size: 100%;.
left: 0;.
extra padding: 0;.
boundary: 0;.
margin: 0;.
list-style: none;.
}

. top-nav div {
display screen: flex;.
justify-content: space-between;.
elevation: 100%;.
margin: 0px;.
extra padding: 0;.
boundary: 0;.
margin: 0;.
}

html

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