title: Question on why this list item needs float?
body: <p>So i was looking at <a href="https://youtu.be/8gNrZ4lAnAw?t=8831" rel="nofollow noreferrer">https://youtu.be/8gNrZ4lAnAw?t=8831</a> to learn how to do repsonsive sites, at step 2:27:11 he creates the navigation by </p>
  
  <p>Edit:
  Forgot to mention, it's mobile first, so the below css is for width > 1024, the mobile css is this:</p>
  
  <pre><code>nav ul {
      position: fixed;
      width: 60%;
      top: 0;
      right: 0;
      text-align: left;
      background-color: rgba(36,41,44);
      height: 100%;
      z-index: 7;
      padding-top: 3em;
  }
  </code></pre>
  
  <p>1024 css</p>
  
  <pre><code>nav ul {
          /* NOTE position fixed to reset */
          position: inherit;
          width: auto;
          background: none;
          display: flex;
          padding-top: 0;
      }
  
      nav ul li {
          float: left;
      }
  </code></pre>
  
  <p>I don't understand why flex on the <code>ul</code> didn't work, that you still need to float the list item? If anyone knows what's going on that would be really helpful. </p>
  
  <p>edit: html</p>
  
  <pre><code>&lt;nav&gt;
                  &lt;a href="#" class="hide-desktop"&gt;
                      &lt;img src="images/ham.svg" alt="toggle menu" class="menu" id="menu" /&gt;
                  &lt;/a&gt;
                  &lt;ul class="show-desktop hide-mobile"&gt;
                      &lt;li id="exitMenu" class="exit-btn hide-desktop"&gt;&lt;img src="images/exit.svg" alt="exit menu"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
  </code></pre>