title: Navigation falls out of alignment
body: <p>For some reason when I load the my website the navigation initially appears in the div below, but once you navigate to another page it appears properly aligned (even if you return to the original page). It also works once you've navigated to another tab, but can still break when reloading the index.</p>
  
  <p>Here is the link to my site: <a href="http://jjeff2payd.github.io/index.html" rel="nofollow">http://jjeff2payd.github.io/index.html</a></p>
  
  <p>Feel free to inspect the code, not sure what the problem is</p>
  
  <p><strong>EDIT:</strong>
  Here is the added code for the navigation portion</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="nav"&gt;
    &lt;li class="active"&gt;
      &lt;a href="./profile.html" title="Learn more"&gt;Profile&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="./experience.html" title="Do things"&gt;Experience&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="./blog.html" title="Think less"&gt;Blog&lt;/a&gt;
    &lt;/li&gt;     
    &lt;li&gt;
      &lt;a href="./contact.html" title="Get in touch"&gt;Contact&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.nav {
      float: right;
      margin-top: 50px;
      margin-right: 30px;
  }
   .nav li {
      display: inline;
      margin-left: 3em;
      padding-top: 6px;
   }
  </code></pre>