title: Navigation bar not positioning at the top of page
body: <p>I have just started learning code and I have managed to solve most problems on my own. However, this one is getting the better of me. </p>
  
  <p>I am trying to get the navigation bar to sit at the top of the page with the text below it but the  element just sits underneath the navigation bar and stops the navigation bar hitting the top of the page.</p>
  
  <p>I will be grateful for any advice.</p>
  
  <p>Many thanks,
  Russ</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    height: 100%;
  }
  
  body {
    margin: 0;
    box-sizing: border-box;
    min-width: 200px;
    height: 100%;
  }
  
  .nav {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
    text-decoration: none;
    font-family: arial, sans-serif;
    background-color: #404040;
    position: fixed;
    width: 100%;
  }
  
  .nav&gt;li {
    display: inline-block;
    padding: 10px 50px;
  }
  
  a {
    text-decoration: none;
    color: #FFF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Portfolio&lt;/title&gt;
    &lt;link type="text/css" href="portfolio.css" rel="stylesheet"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;ul class="nav"&gt;
      &lt;li&gt;&lt;a href="../Home/Index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="../About/about.html"&gt;About me&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="../Contact/contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;h1&gt; hello world&lt;/h1&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>