title: Why aren't my flexbox items appearing on next line when screen is resized
body: <p>I have set flexbox with my ul consisting of 3 li items and they are working perfectly. When the user reaches a screen size below 600px, I want all my li items to appear on new line. This isn't working! They still continue to show on the same line? What went wrong?</p>
  
  <p>Here is my html:-</p>
  
  <pre><code>&lt;ul&gt;
          &lt;li&gt;&lt;h1&gt;My Photography Works&lt;/h1&gt;&lt;/li&gt;
          &lt;li&gt;&lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nisi neque accusamus cum quibusdam rerum error nulla quidem et distinctio illum est, praesentium incidunt doloremque ducimus molestias quod explicabo aliquam!&lt;/p&gt;&lt;/li&gt;
          &lt;li&gt;&lt;h3&gt;Contact Me Now&lt;/h3&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul&gt;
              &lt;li&gt;&lt;h1&gt;Published Papers&lt;/h1&gt;&lt;/li&gt;
              &lt;li&gt;&lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero nisi neque accusamus cum quibusdam rerum error nulla quidem et distinctio illum est, praesentium incidunt doloremque ducimus molestias quod explicabo aliquam!&lt;/p&gt;&lt;/li&gt;
              &lt;li&gt;&lt;h3&gt;Browse them now&lt;/h3&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>Here is my style.scss </p>
  
  <pre><code>ul{
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      justify-content: space-between;
  
      li{
          margin-bottom: 10px;
      }
  
      @media screen and (max-width: 600px) {
          flex: 100%;
        }
  
      li:nth-child(1){
          font-family: Arial, Helvetica, sans-serif;
          flex: 20%;
  
      }
  
      li:nth-child(2){
          font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
          font-size: 18px;
          flex: 50%;
      }
  
      li:nth-child(3){
          font-family: Arial, Helvetica, sans-serif;
          flex: 10%;
      }
  }
  </code></pre>