Elements moves on resize - html

Question

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.
.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;
}
HTML:
<center><header><img src="Bilder/spegel.jpg"/></header></center>