下拉菜单在屏幕外流动

Question

我的下拉菜单有一个问题（请参见下图），单击该图标时它会溢出屏幕。我不确定这是否与隐藏的父元素有任何关系-下拉菜单仅在屏幕尺寸小于1000px时显示。屏幕低于1000像素后，inline-block中的li's将被隐藏。

HTML和CSS

#navbar {
  text-transform: uppercase;
  width: 100%;
  margin: 0 auto;
}

#logo {
  float: left;
  margin-left: 5%;
  font-size: 25px;
  letter-spacing: 4px;
  border: solid black 1px;
  padding: 5px;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-right: 70px;
  padding-top: 38px;
  position: relative;
}

nav a {
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

#dropdown {
  display: none;
}

.dropdown-nav {
  display: none;
}

nav li {
  display: none;
}

@media only screen and (max-width: 992px) {

#dropdown {
  display: block;
  list-style: none;
  float: right;
  list-style: none;
  margin-right: 5%;
  margin-top: 6px;
  overflow: hidden;
}

.dropdown-nav {
  position: absolute;
  display: none;
  float: left;
}
}

<div id="navbar">
  <h3 id="logo">Rob Moore LTD</h3>
  <nav>
    <ul>
      <li><a class="nav" href="#home">Home</a></li>
      <li><a class="nav" href="#about">About</a></li>
      <li><a class="nav" href="#services">Services</a></li>
      <li><a class="nav" href="#gallery">Gallery</a></li>
      <li><a class="nav" href="#contact">Contact</a></li>
    </ul>
  </nav>
  <ul id="dropdown">
    <li>
      <p><i class="fas fa-hamburger fa-2x"></i></p>
      <ul class="dropdown-nav">
        <li class="dropdown-item"><a href="#home">Home</a></li>
        <li class="dropdown-item"><a href="#about">About</a></li>
        <li class="dropdown-item"><a href="#services">Services</a></li>
        <li class="dropdown-item"><a href="#gallery">Gallery</a></li>
        <li class="dropdown-item"><a href="#contact">Contact</a></li>
      </ul>
    </li>
  </ul>
</div>