Toggle menu on mobile icon not where it needs to be

My Code:

/* Basic styling */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.toggle {
     color: white;
}

nav {
  background: #222;
  padding: 0 15px;
  font-family: 'Open Sans';
  font-weight: 600;
  margin-bottom: -10px;
}
nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
     color: rgb(233, 221, 221);
}


.logo {
  font-size: 20px;
  padding: 7.5px 10px 7.5px 0;
}
.item {
  padding: 10px;
}

/* Mobile menu */
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.menu li a {
  display: block;
  padding: 15px 5px;
}
.menu li.subitem a {
  padding: 15px;
}
.toggle {
  order: 1;
  font-size: 20px;
}

.item {
  order: 3;
  width: 100%;
  text-align: center;
  display: none;
}
.active .item {
  display: block;
}


/* Tablet menu */
@media all and (min-width: 700px) {
  .menu {
    justify-content: center;
  }
  .logo {
    flex: 1;
  }
 
  .toggle {
    flex: 1;
    order: 2;
  }
}
/* Desktop menu */
@media all and (min-width: 960px) {
  .menu {
    align-items: flex-start;
    flex-wrap: nowrap;
    background: none;
  }
  .logo {
    order: 0;
  }
  .item {
    order: 1;
    position: relative;
    display: block;
    width: auto;
  }
  .submenu-active .submenu {
    display: block;
    position: absolute;
    left: 0;
    top: 68px;
    background: #111;
  }
  .toggle {
    display: none;
  }
  .submenu-active {
    border-radius: 0;
  }
}
<nav>
   <ul class="menu">
      <li class="logo"><a href="#">Upright Code</a></li>
      <li class="item"><a href="#">Home</a></li>
      <li class="item"><a href="#">About</a></li>
      <li class="item">
         <a href="#">Plans</a>
      </li>
      <li class="item"><a href="#">Contact</a></li>
      <li class="item"><a href="#">Lessons</a>
      </li>
   </ul>
   <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
   </ul>
</nav>
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");


/* Toggle mobile menu */
function toggleMenu() {
    if (menu.classList.contains("active")) {
        menu.classList.remove("active");
        toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
    } else {
        menu.classList.add("active");
        toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
    }
}



/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
    if (item.querySelector(".submenu")) {
        item.addEventListener("click", toggleItem, false);
    }
    item.addEventListener("keypress", toggleItem, false);
}
document.addEventListener("click", closeSubmenu, false);


When I display the output the three bars to open the mobile menu is not where it needs to be.
image

can someone tell me how to put the three bars where the arrow is pointing at?

There is and extra Closing UL in between .

 <li class="item"><a href="#">Lessons</a>
      </li>
   </ul>
   <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
   </ul>
4 Likes