title: Navigation bar not covering all the way
body: <p>I am trying make my navigation bar cover all of the right side as shown in picture. I can't figure it out. I tried everything and still can't figure it out. Any suggestions is appreciated.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;
  Lighthouse Island Bistro
  &lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="tes.css"&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="wrapper"&gt;
  &lt;header&gt;
  &lt;h1&gt;Lighthouse Island Bistro&lt;/h1&gt;
  &lt;/header&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="menu.html"&gt;Menu&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="map.html"&gt;Map&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;main&gt;
  &lt;h2&gt;Locally Roasted Free-Trade Coffe&lt;/h2&gt;
  &lt;p&gt;Indulge in the aroma of freshly ground coffe. Speciality drinks are               
  available hot or cold&lt;/p&gt;
  &lt;h2&gt;Speciality Pastries&lt;/h2&gt;
  &lt;p&gt;Enjoy a selection of our fresh-baked, organic pastries, including     
  fresh-fruit muffins, scones, croissants, and cinnamon rolls.&lt;/p&gt;
  &lt;h2&gt;Lunchtime is Anytime&lt;/h2&gt;
  &lt;p&gt;Savor delicios wraps and sandwiches on hearty, whole-grain breads with     
  locally-grown salad, fruit, and vegetables.&lt;/p&gt;
  &lt;h2&gt;Panoramic View&lt;/h2&gt;
  &lt;p&gt;Take in some scenery! &lt;br&gt; The top of our lighthouse offers a 
  panoramic view of the countryside. Challenge your friends to climb our     
  100-stair tower.&lt;/p&gt;
  &lt;/main&gt;
  &lt;footer&gt;
  Copyright &amp;copy; 2016
  &lt;/footer&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>body
  {
  background-color: #010d91; 
  margin: 0;
  }
  #wrapper
  {
  width: 80%;
  margin: 0 auto;
  background-color: white;
  color: black;
  }
  h1
  {
  font-size: 50px;
  text-align: center;
  }
  header
  {
  background-color: #5995f7;
  padding: 10px 10px 10px 10px;   
  }
  nav
  {
  float: right;
  width: 150px;
  font-weight: bold;
  letter-spacing: 0.1em;
  }
  main
  {
  padding:10px 20px;
  color: #000000;
  display: block;
  overflow: auto;
  }
  h2
  {
  color: #869dc7;
  }
  nav ul
  {
  list-style-type: none;
  margin: 0;
  padding: 0;
  }
  nav a
  {
  text-decoration: none;
  padding: 20px;
  display: block;
  background-color: #89c6ed;
  border-bottom: 1px solid #FFFFFF;
  }
  nav a:link
  {
  color:#ffffff
  }
  nav a:visited
  {
  color: #eaeaea;
  }   
  nav a:hover
  {
  color: #869dc7;
  background-color: #eaeaea;
  }
  footer
  {
  text-align: center;
  font-style: italic;
  font-size: small;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #5995f7;
  }
  </code></pre>
  
  <p>Mine looks like this:
  <a href="https://i.imgur.com/PKaa0W5.png" rel="nofollow noreferrer">https://i.imgur.com/PKaa0W5.png</a></p>
  
  <p>I want my navigation bar to cover the whole thing like in this one:
  <a href="https://i.imgur.com/h2navpU.png" rel="nofollow noreferrer">https://i.imgur.com/h2navpU.png</a></p>