title: Why isn't my box flexing to the end of its container?
body: <p>I can't figure out why the red box in the image above isn't flexing to attach to the end of the outer green box. I want my logo to flex to sit at the start of the nav box and the navigation items to flex to sit at the end of the nav box.</p>
  
  <p><a href="https://i.stack.imgur.com/Pe82U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pe82U.png" alt="flexbox example"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;img src="./images/random.jpeg" alt="logo" class="logo" /&gt;
    &lt;ul&gt;
      &lt;a href="/index.html" class="individual_nav_item"&gt;Home&lt;/a&gt;
      &lt;a href="/about_us.html" class="individual_nav_item"&gt;About Us&lt;/a&gt;
      &lt;a href="#" class="individual_nav_item"&gt;FAQ&lt;/a&gt;
      &lt;a href="#" class="individual_nav_item"&gt;Contact&lt;/a&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>