title: CSS works on chrome but not on edge 40.15063.0.0 and ie11
body: <p>My code for a simple webpage works on chrome, but it refuses to read the css on ie and ms edge. It may be a compatibility problem, but I am unsure on how to make it work.
  My HTML is:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Home&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;&gt;
      &lt;script src=&quot;https://kit.fontawesome.com/849cf0a04d.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          
          &lt;div class=&quot;main&quot;&gt;
              &lt;div class=&quot;logo&quot;&gt;
                  &lt;img src=&quot;glasses2.png&quot;&gt;
              &lt;ul&gt;
                  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;Homepage.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;Animation Page.html&quot;&gt;Animation&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;Video Page.html&quot;&gt;Video&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;Audio Page.html&quot;&gt;Audio&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;Image Page.html&quot;&gt;Image&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class=&quot;title&quot;&gt;
              
          &lt;/div&gt;
          &lt;div class=&quot;search-box&quot;&gt;
              &lt;input class=&quot;search-txt&quot; type=&quot;text&quot; name=&quot;input&quot; placeholder=&quot;Search..&quot;&gt;
              &lt;a class=&quot;search-btn&quot; href=&quot;#&quot;&gt;
              &lt;i class=&quot;fas fa-search&quot;&gt;&lt;/i&gt;
                  
              &lt;/a&gt;
      &lt;/header&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>And the CSS (which may be the reason for not working as intended) is this:</p>
  <pre><code>*{
      margin: 0;
      padding: 0;
      font-family: century gothic;
  }
  
  header {
      background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../cyber.gif);
      height: 100vh;
      background-size: cover;
      background-position: center;
  }
  
  ul{
      position: absolute;
      top: 0.1%;
      right: 5%;
      list-style-type: none;
      margin-top:  25px;
  }
  
  ul li{
      display: inline-block;
  }
  
  ul li a{
      text-decoration: none;
      color: #fff;
      transform: translate(-50%, -50%);
      background: none;
      height: 25px;
      border-radius: 25px;
      padding: 10px;
      border: 1px solid transparent;
      transition: 0.6s ease;
  }
  
  ul li a:hover{
      background-color: #fff;
      color: #000;
  }
  
  ul li.active a{
      background-color: #fff;
      color: #000;
  }
  
  .logo img{
      float: left;
      width: 150px;
      height: auto;
  }
  
  .main{
      max-width: 1200px
      margin: auto;
  }
  
  .search-box{
      position: absolute;
      top: 5.5%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #2f3640;
      height: 25px;
      border-radius: 25px;
      padding: 10px;
  }
  
  .search-btn{
      color: #6C92C8;
      float: right;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #2f3640;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .search-txt{
      border: none;
      background: none;
      outline: none;
      float: left;
      padding: 0;
      color: white;
      font-size: 16px;
      line-height: 25px;
      width: 240px;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/fUn49.png" rel="nofollow noreferrer">here is how it looks like on edge:</a></p>
  <p>Not sure on what I should do...</p>