Échec de la barre de navigation réactive

J'ai une barre de navigation que je veux qu'elle n'a que le premier élément Wakanda Teamet une icône de hamburger lorsque l'écran devient plus petit que 900px. Mais je continue à faire apparaître d'autres éléments comme sur l'image. Quelqu'un peut-il aider?

HTML:

 <ul class="topnav" id="myTopnav">
    <li style="float:left"><a href="#home" class="home">Wakanda Team</a></li>
    <li><a><i class="material-icons">subdirectory_arrow_left</i> Sign out</a></li>
    <li><a><i class="material-icons">exit_to_app</i> Sign in</a></li>
    <li><a><i class="material-icons">person_add</i> Register</a></li>
    <li><a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a></li>
  </ul>
      <p>Welcome to <%= title %></p>
  <script>
      function myFunction() {
          var x = document.getElementById("myTopnav");
          if (x.className === "topnav") {
              x.className += " responsive";
          } else {
              x.className = "topnav";
          }
      }
  </script>

CSS:

 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FFFFFF;
    position: fixed;
    top: 0;
    width: 100%;
}

li {
    float: right;
}

li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.home){
    background-color: #111;
    text-decoration: none;
    color: white;
}

li a .home:hover{
    text-decoration: none;
}

.material-icons {
    vertical-align: middle;
}

.topnav .icon {
    display: none;
}

@media screen and (max-width: 900px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
        float: right;
        display: block;
    }
}

@media screen and (max-width: 900px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}