title: Can't Position Nav Properly On Bottom Element
body: <p>I know that this should be a simple fix, but I just can't seem to figure out how to place my nav to sit directly on top of the h4 that is positioned on the bottom of the page. I want to have this feature continue throughout my site and don't want to move forward until I can resolve this issue. Any Help is very much appreciated. </p>
  
  <p><strong>HTML:</strong> </p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Nathan Langer&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Dr+Sugiyama' rel='stylesheet'         type='text/css'&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'     type='text/css'&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="wrapper="&gt;
  &lt;div id="name"&gt;
      &lt;h1&gt;Nathan Langer&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="content"&gt;&lt;/div&gt;
  &lt;div id="footer"&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;&lt;strong&gt;home&lt;/strong&gt;&lt;img     class="logos" src="images/homelogo.png" width="45"height="35"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="resume.html"&gt;&lt;strong&gt;resume&lt;/strong&gt;&lt;img class="logos" src="images/resume logo.png" width="36"height="37"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="portfolio.html"&gt;&lt;strong&gt;portfolio&lt;/strong&gt;&lt;img class="logos" src="images/portfolio logo.png" width="45"height="35"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="what i do.html"&gt;&lt;strong&gt;what i do&lt;/strong&gt;&lt;img class="logos" src="images/camera logo.png" width="60"height="37"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;h4&gt;for professional video and media production&lt;/h4&gt;
  &lt;/div&gt;
  &lt;/div&gt; &lt;!-- close for wrapper  --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body { 
   background: url(images/test.png) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
  }
  #wrapper {
      margin: auto}
  #name {
  text-align: center;
  margin-top: -65px;
  font-size: 40px;
  color: white;
  font-family: 'Dr Sugiyama', cursive;
  text-shadow: 0 1px 0 #333,
               0 2px 0 #333,
               0 3px 0 #333,
               0 4px 0 #333,
               0 5px 0 #333,
               0 5px 4px #989898;
      }
  
  #footer {
  width:100%;
  height:93px;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  
  }
  nav{position: relative;text-align: center;}
  nav ul {list-style: none; }
  li  {
  display: inline;
  border: 2px solid rgb(256,256,256);
  font-family:'Ubuntu', sans-serif;
  border-top-left-radius:1em;
  border-top-right-radius:1em;
  background-color: #A3A3A3 ;
  padding: 13px;
  margin: 10px;
  }
  img.logos{vertical-align: -11px; padding-left: 3px;}
  nav li a:hover {text-decoration:none ;}
  nav li a:visited {color: rgb(256,256,256);}
  nav li a:link {text-decoration:none; color: white;}
  
  h4 {
  text-decoration:none ;
  text-align: center;
  background-color: #A3A3A3;
  color: white;
  font-family: Tahoma, Geneva, sans-serif;
  }
  
  /* resume page */
  /* end resume page */
  /* portfolio page */
  #warning {
      text-align: center;
      color: white;
      font-size: 35px;
      padding-top: 100px;
      }
  </code></pre>