title: Page changes when clicking a div link
body: <p>I will explain my problem. 
  For school I have to make a website, but it is not working how it should be.
  I have a border made of divs around the screen, and the page in the middle. When I first open the page, everything is in place, but when I click on one of the nav items (#link) the page suddenly loses its margin top and left. So it goes outside of the borders. I pasted all the code in the snippet, as I believe it will be too much for a post.</p>
  
  <p>To see the full page and problem, please copy the code in a file to open it in the browser itself. I used vw and vh because it want it to be the same on different screens. I will do the inside elements mostly with percentages</p>
  
  <p>So my questions:</p>
  
  <ol>
  <li><p>How do I prevent this from happening, and an example? </p></li>
  <li><p>Is there a way to set #Home as the usual landing space? without adding #Home in the link (and without changing its position)?</p></li>
  <li><p>And my last question regarding CSS animation, how do I add a transition so it looks like the page is scrolling to the #div.</p></li>
  </ol>
  
  <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>body{
    top: 0;
    margin: 0;
    padding: 0;
    left: 0;
  }
  .wrapper{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  .container{
    width: 300vw;
    height: 200vh;
    background-image: url("../img/background.png");
    background-size: cover;
  }
  /* simple nav*/
  ul{
    display: inline;
    z-index: 99;
    position: fixed;
  }
  ul li{
    list-style-type: none;
    display: inline;
  }
  ul li a{
    text-decoration: none;
  }
  /*pages*/
  
  .page{
    margin: 10vh 10vw;
    width: 80vw;
    height: 80vh;
      transition: 2s;
  }
  
  #Interactive{
    background: blue;
    float: left;
  
  }
  #Graphical{
    float: left;
  
  }
  #Company{
    float: left;
  }
  #Conclusion{
    float: left;
  }
  #Home{
    float: left;
  }
  /*header borders*/
  .borders{
    position: fixed;
    z-index: 30;
  }
  .border-top{
  height: 10vh;
  width: 100vw;
  top:0;
  background: #007CFF;
  }
  .border-left{
    height: 100vh;
    width: 10vw;
    top: 0;
    background: #007CFF;
    position: absolute;
  }
  .border-right{
    height: 100vh;
    width: 10vw;
    top: 0;
    background: #007CFF;
    float: right;
    margin-top: -10vh;
  
  }
  .border-bottom{
    height: 10vh;
    width: 100vw;
    bottom: 0;
    background: #007CFF;
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
  
  
  &lt;ul&gt;
    &lt;li&gt;&lt;a href="#Home"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#Interactive"&gt;Interactive&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#Graphical"&gt;Graphical&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#Company"&gt;Company&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#Conclusion"&gt;Conclusion&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  
  &lt;div class="borders"&gt;
  &lt;div class="border-top"&gt;
  &lt;/div&gt;
  &lt;div class="border-left"&gt;
  &lt;/div&gt;
  &lt;div class="border-right"&gt;
  &lt;/div&gt;
  &lt;div class="border-bottom"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="wrapper"&gt;
  &lt;div class="container"&gt;
    &lt;div id="Interactive" class="page"&gt;
    &lt;/div&gt;
    &lt;div id="Graphical"class="page"&gt;
    &lt;/div&gt;
    &lt;div id="Company"class="page"&gt;
    &lt;/div&gt;
    &lt;div id="conclusion"class="page"&gt;
    &lt;/div&gt;
    &lt;div id="home"class="page"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for thinking with me, any help is appreciated.
  I didn't really know how to call this post, so the search for it was difficult.</p>