Почему мой ящик не сгибается до конца контейнера?

Question

Я не могу понять, почему красная рамка на изображении выше не сгибается, чтобы прикрепить ее к концу внешней зеленой рамки. Я хочу, чтобы мой lo go сгибался в начале навигационного блока, а элементы навигации - в конце навигационного блока.

nav {
  border-color: green;
  border-style: solid;
  border-radius: thin;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 120px;
  margin-left: 120px;
}

ul {
  border-color: red;
  border-style: solid;
  border-radius: thin;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.logo {
  border-color: green;
  border-style: solid;
  border-radius: thin;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 5vw;
}

.individual_nav_item {
  border-color: green;
  border-style: solid;
  border-radius: thin;
  text-decoration: none;
  font-family: sans-serif;
  color: #445077;
  font-size: 18px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 18px;
}

.individual_nav_item:hover {
  font-weight: bold;
}

<nav>
  <img src="./images/random.jpeg" alt="logo" class="logo" />
  <ul>
    <a href="/index.html" class="individual_nav_item">Home</a>
    <a href="/about_us.html" class="individual_nav_item">About Us</a>
    <a href="#" class="individual_nav_item">FAQ</a>
    <a href="#" class="individual_nav_item">Contact</a>
  </ul>
</nav>

Answer 1

содержимое nav flexbox должно быть установлено между:

nav{
  border-color: green;
  border-style: solid;
  border-radius: thin;
  display: flex;
  flex-direction: row;
  justify-content : space-between ;
  align-items: center;
  margin-right: 120px;
  margin-left: 120px;
}