title: Horizontal Nav not working in Microsoft Edge/IE
body: <p>I'm working on a school project, and I have a nav bar that works fine in Chrome, Firefox, Safari, etc. However, it's not displaying properly on Edge or IE. This is how it is supposed to look:</p>
  
  <p><a href="https://i.stack.imgur.com/GSy2m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GSy2m.png" alt="enter image description here"></a></p>
  
  <p>Here is how it looks on Edge/IE:</p>
  
  <p><a href="https://i.stack.imgur.com/Mb08J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mb08J.png" alt="enter image description here"></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 {
    width: 100%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0;
    background-color: #f3a368;
  }
  
  nav ul {
    list-style: none;
    width: 609px;
    margin: 0 auto;
    padding: 0;
  }
  
  nav li {
    float: left;
  }
  
  nav li a {
    display: block;
    padding: 8px 30px;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 3px;
    line-height: 28px;
    padding-bottom: 70px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="portal.html"&gt;Portal&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>