HTML navbar keeps disappearing and moving around the page whenever i zoom in or resize the window

WHEN RUNNING THIS CODE YOU HAVE TO VIEW IN FULL PAGE MODE

code for navigation, header, and style for both. whenever I zoom in or out on my browser the navbar keeps moving around and eventually it just disappears off of the screen, same thing happens whenever I try to resize the window.

I would like to my navbar to be responsive but remain inside of the header and not move around whenever the page is zoomed in. would greatly appreciate any help.

/* ---------- Navigation ---------- */

nav{
  width: 100%;
  height: 60px;
  font-weight: bold;
  color: white;
    position: absolute;
    bottom: 500px;
    left: -250px;
}

nav ul{
  float: right;
}

nav ul li{
  float: left;
  list-style: none;
  position: relative;
}

nav ul li a{
  font-family: arial;
  color: black;
  font-size: 20px;
  padding: 22px 14px;
  display: block;
  text-decoration: none;
}

nav ul li ul{
  display: none;
  position: absolute;
  background: #4f88bd;
  padding: 10px;
  border-radius: 0px 0px 4px 4px;
}

nav ul li:hover ul{
  display: block;
}

nav ul li ul li{
  width: 180px;
  border-radius: 4px;
}

nav ul li ul li a{
  padding: 8px 14px;
}

nav ul li ul li a:hover{
  background: #26227d;
}

/* ---------- Navigation ---------- */

/* ---------- Header ---------- */

header{
  background: #35424a;
  color: #ffffff;
  padding: 20px;
  min-height: 70px;
    text-align: left;
}

header h1{
    font-size: 50px;
    text-align: center;
}

header h1 a{
    text-decoration: none;
    color: white;
}

/* ---------- Header ---------- */

<header>
            <h1><a href="index.html">Olympic Class Liners</a></h1>
                <nav>
                    <ul>
                <li><a href="#">Olympic</a>
                    <ul>
                      <li><a href="olympic-overview.html">Overview</a></li>
                      <li><a href="olympic-crew.html">Crew</a></li>
                      <li><a href="olympic-decks.html">Decks</a></li>
                                    <li><a href="olympic-passengers.html">Passengers</a></li>
                    </ul>
                </li>

                        <li><a href="#">Titanic</a>
                             <ul>
                                 <li><a href="titanic-overview.html">Overview</a></li>
                                 <li><a href="titanic-crew.html">Crew</a></li>
                                 <li><a href="titanic-decks.html">Decks</a></li>
                                 <li><a href="titanic-passengers">Passengers</a></li>
                                 <li><a href="titanic-sinking.html">Sinking</a></li>
                                 <li><a href="titanic-wreck.html">Wreck</a></li>
                             </ul>
                     </li>

                     <li><a href="#">Britannic</a>
                             <ul>
                                 <li><a href="#">Overview</a></li>
                                 <li><a href="#">Crew</a></li>
                                 <li><a href="#">Decks</a></li>
                                 <li><a href="#">Passengers</a></li>
                                 <li><a href="#">Sinking</a></li>
                                 <li><a href="#">Wreck</a></li>
                             </ul>
                     </li>

                     <li><a href="#">White Star Line</a>
                             <ul>
                                 <li><a href="#">Overview</a></li>
                                 <li><a href="#">Crew</a></li>
                                 <li><a href="#">Decks</a></li>
                             </ul>
                     </li>

                     <li><a href="#">Harlond and Wolff</a>
                             <ul>
                                 <li><a href="#">Overview</a></li>
                                 <li><a href="#">Crew</a></li>
                                 <li><a href="#">Decks</a></li>
                             </ul>
                     </li>

                      <li><a href="#">Galleries</a>
                            <ul>
                                <li><a href="exterior-gallery.html">Exterior Images</a></li>
                                <li><a href="#">Interior Images</a></li>
                            </ul>
                        </li>
                        <li><a href="acknowledgments.html">Acknowledgments</a></li>
              </ul>
                </nav>
        </header>