title: Flexbox justify content space between not responsive
body: <p>I'm having a very basic problem with the CSS in my React website, and I was looking for some help.</p>
  <p>I have a very barebones header section set up</p>
  <p>HTML:</p>
  <pre><code>&lt;div className=&quot;nav&quot;&gt;
              &lt;div className=&quot;menu&quot;&gt;
                  &lt;a href=&quot;/&quot;&gt;Menu&lt;/a&gt;
              &lt;/div&gt;
              &lt;div className=&quot;logo&quot;&gt;
                  &lt;a className=&quot;title&quot; href=&quot;/&quot;&gt;Brand Name&lt;/a&gt;
                  &lt;a className=&quot;subtitle&quot; href=&quot;/&quot;&gt;Slogan&lt;/a&gt;
              &lt;/div&gt;
              &lt;div className=&quot;lang&quot;&gt;
                  &lt;ul&gt;
                      &lt;li&gt;FB&lt;/li&gt;
                      &lt;li&gt;IG&lt;/li&gt;
                      &lt;li&gt;TW&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>body {
      margin: 0;
      padding: 0;
  }
  
  .nav{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      color: white;
      text-decoration: none;
      font-family: Visual;
      letter-spacing: 1px;
      width: 100%;
  
  
      .menu{
          a{
              text-decoration: none;
              color: white;
              letter-spacing: 1.3px;
              font-size: 1.2rem;
          }
      }
      .logo{
  
          .title{
              font-size: 2rem;
          }
          .subtitle{
              text-align: center;
              margin-top: 5px;
  
          }
          a{
              text-decoration: none;
              color: white;
              display: block;
          }
  
      }
  
      .lang{
          font-size: 1.2rem;
          ul{
              li{
                  display: inline;
                  margin-left: 10px
              }
          }
          
  
      }
  }
  </code></pre>
  <p>The flex seems to be working, but when I resize the window horizontally, the center element gets pushed off center and eventually out of the screen on one side. <a href="https://i.stack.imgur.com/Ouo7q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ouo7q.png" alt="full size" /></a></p>
  <p><a href="https://i.stack.imgur.com/EnXeE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EnXeE.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/cXHrJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cXHrJ.png" alt="enter image description here" /></a></p>
  <p>Is this related to media queries?</p>