title: Elements moves on resize
body: <p>Okey so when I shrink my chrome window the Nav and the Header moves with the rezising. I don´t want that. The Mainbox however stays in position? No idea why but great! I can´t really find the difference between the Nav class and the Mainbox one except the overflow: auto which didn´t help on the nav nor the header.</p>
  
  <pre><code>    .container {
      height: 800px;
      width: 1500px;
  
  }
  body {
  margin:0px;
      padding:0px;
      width:100%;
  }
  
  header
  {
      top: 11px;
      width: 100%;
  
  
      }
  
      ol {
      list-style-type: upper-roman;
  
      }
  
      .sideIMG {
      position:fixed;
      top: 200px;
      left: 500px;
      height: 100%;
      float: left;
  
  
      }
      .sideIMGR {
      position:absolute;
      top: 200px;
      right: 20%;
      height: 100%;
      float: left;
      overflow: auto;
  
  
      }
  .mainBox
  {
      background-color: #F0F0F0 ;
      height: 1050px;
      width: 700px;
      box-shadow: 10px 10px 5px #888888;
      overflow: auto;
      top: 310px;
  
      padding-top: 30px;
      padding-right: 50px;
      padding-left: 50px;
      }
  .textBox
  {   
  height: 110px;
  width: 200px;
  background-color:#E8E8E8;
  border-style: double;
  }
      H1{
  
      font-family:"Brush Script MT";
      }
  
  footer
  {
  box-shadow: 10px 10px 5px #888888;
  border-bottom-right-radius: 20px;
      border-bottom-left-radius: 20px;
  
      top: 1360px;
      height: 150px;
      width: 800px;
      background-color: #F0F0F0 ;
  
  
      }
  .container nav ul {
      list-style-type: none;
  }
  
  nav 
  {
      padding: 10px 20px 20px 20px;
      padding-right: 50px;
      padding-left: 50px;
      box-shadow: 10px 10px 5px #888888;
      width: 700px;
      height:40px;
  
  
      background-color: #F0F0F0;
  
      border-color: black;
      border-width: 1px;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      font-family: Georgia, "Times New Roman", Times, serif;
  
  }
  a {
      color: #000;
      text-decoration: none;
      padding: 20px;
  
  }
  
  a:hover 
  {
       color:#00A0C6; 
       text-decoration:none; 
       cursor:pointer;  
  }
  .bildRuta
  {
      height: 350px;
      width: 250px;
      left: 500px;
      top: 350px;
      }
  
  
  .mainBox a img {
      border: medium solid #000;
      border-radius: 5px;
  }
  .underRubrik
  {`enter code here`
      font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
  
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;center&gt;&lt;header&gt;&lt;img src="Bilder/spegel.jpg"/&gt;&lt;/header&gt;&lt;/center&gt;
  </code></pre>