title: How to make nav bar scale with resizing of browser window
body: <p>My nav bar stays at its original size and does not scale when I resize the browser. I would like the bar to be centered and stay with the body of the page which is at 80% width.  The body max-width is 1900px and the min-width is 700px Do you know what I a doing wrong?</p>
  
  <p>Relevant HTML:</p>
  
  <pre><code>&lt;div id="hnav"&gt;
  &lt;nav&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="about.html"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="work.html"&gt;WORK&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="resume.html"&gt;RESUME&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="jordanblog.html"&gt;JORDAN BLOG&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="blog.html"&gt;BLOG&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="contact.html"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Relevant CSS:</p>
  
  <pre><code>#hnav {white-space: nowrap;
  max-width: 1900px;
  min-width: 700px;
  text-align: center;
  height: 90px;
  }
  
  nav ul {list-style-type: none;
  position: fixed, center;
  padding-top: 0;
  width: 100%;
  margin: 0px;
  padding:0;
  background-color: #ffffff;
  }
  
  nav li { display: inline;
  }
  
  nav {text-align: center;
  list-style: none;
  font-size: 24px;
  }
  
  nav a { font-family: arial, verdana;
  color:#000000;
  text-decoration: none; 
  padding: 50px;
  display: inline-block;
  }
  
  nav a:hover { text-decoration: none;
  color: #bfbfbf; 
  }
  nav a:focus { text-decoration: none;
  color: #bfbfbf;
  }
  
  nav a:active { text-decoration: none;
  background-color: #000000;
  color: #cccccc;
  }
  </code></pre>
  
  <p>Thanks!</p>