title: Making the nav bar span the width of the page
body: <p>I have created a nav bar, but resizing and using on different screen lengths always throws it off... How do I create a nav bar that'll span the width of the page on any screen without moving around anywhere, thanks =)</p>
  
  <p>HTML: 
          
      
      </p>
  
  <pre><code>    &lt;title&gt;Earthquakes In Blenheim&lt;/title&gt;
  
      &lt;link rel="shortcut icon" type="image/x-icon" href="wav.png"&gt;
      &lt;link rel=stylesheet href="stylesheet.css" type="text/css"&gt;
  
      &lt;center&gt; &lt;img src="EARTHQUAKES THAT SURROUND US.png" style="width:360px"&gt; &lt;/center&gt;
  
  &lt;/head&gt;
  
  &lt;body bgcolor="gray"&gt;
  
          &lt;nav&gt;
              &lt;li&gt; &lt;a href="http://www.geonet.org.nz/quakes/felt"&gt; Current Earthquakes &lt;/a&gt; &lt;/li&gt;
              &lt;li&gt; &lt;a href="http://www.dropcoverholdon.org/"&gt; Drop! Cover! Hold On! &lt;/a&gt; &lt;/li&gt;
              &lt;li&gt; &lt;a href="https://www.google.com.au/maps/place/Blenheim,+New+Zealand/@-41.5290857,173.932808,13z/data=!3m1!4b1!4m2!3m1!1s0x6d390e0080e269bd:0x0a00ef88e796a530"&gt; Location of Blenheim &lt;/a&gt; &lt;/li&gt;
              &lt;li&gt; &lt;a href="#"&gt; About Us &lt;/a&gt; &lt;/li&gt;
              &lt;li&gt; &lt;a href="bibliography.html"&gt; Bibliography &lt;/a&gt; &lt;/li&gt;
          &lt;/nav&gt;
  
  &lt;img src="img1.png" width="100%"&gt;
  
  &lt;p&gt;&lt;center&gt;
      paragraph
  &lt;/center&gt;&lt;/p&gt;
  
  &lt;img src="img2.png" width="100%"&gt;
  
  &lt;p&gt;&lt;center&gt;
  paragraph 2
  &lt;/center&gt;&lt;/p&gt;
  
  &lt;img src="img3.png" width="100%"&gt;
  
  &lt;p&gt; &lt;center&gt;
  Parapgraph 3
  &lt;/center&gt;&lt;/p&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>CSS:</p>
  
  <pre><code> h1 {
      font-family: Arial;
      font-size: 50px;
      font-weight: bold;
  color: black;
  text-align: ;
  width: 100%;
  float: center;
  margin: 0 0 0 0;
  padding: 0;
  list-style: none;
  }
  
  body {
      color: white;
      font-family: Arial;
      font-size: 20px;
      margin: 0 0 0 0;
      max-width: 100%;
      }
  
  /* Navigation Bar Styling */
  
  nav {
      margin: 0 0 0 0;
      font-family: Arial;
      font-size: 100%;
      }
  
  nav li {
       float: left;
      }
  
  nav li a {
      background-color: black;
      display: block;
      padding: 0 0;
      text-decoration: none;
      font-weight: bold;
      color: white;
      border-right: 1px solid gray;
      }
  
   nav li a:hover {
       color: black;
       background-color: white; 
       }
  
   /* Navigation Bar Styling */
  </code></pre>
  
  <p>I'm also somewhat new to html, so if there is anything else that I should add or change, please let me know. </p>