CSS alignment doesn't work on different devices
<p>I have a website written in php(html) and css, and my problem is, that sometimes(usually after redirecting), css alignment breaks, and everything, except header picture, moves to top left corner. On my computer (even that, I am already talking about site uploaded on host server) I can solve this by refreshing page, and suddenly everything is just the way it should be. On different devices (I have tried it on 2 different computers and 3 phones), it is never shown the right way. I have tried this on different browsers (firefox, chrome, phone browsers...) but it didn't make any difference, so obviously the problem is my coding :D
If anyone is interested, i am posting my css code, if not, simply skip it.</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>body{
 font-family: Arial, sans-serif;
 font-size: 12pt;
 height: 100%;
 width: 100%;
 margin: 0px;
}
#page{
 overflow: auto;
 background: #B6B1B1 url('img/background.JPG') no-repeat center;
 background-attachment: fixed;
}
img{
 max-width: 100%;
 height: auto;
 width: auto\9;
}
#languages li a{
 font-weight: bold;
 color: #191045;
}
#languages li a:hover{
 color: #E49900;
}
h1 a span{
 display: none;
}
h1 a{
 width: 100%;
 height: 240px;
 display: block;
 position: absolute;
 background: transparent url('img/headerpic.png') no-repeat top center;
}
#menubar{
 width: 70%;
 position: absolute;
 margin: 220 15% 0 15%;
 text-align: center;
}
#menu li{
 display: inline-block;
 height: 40px;
 line-height: 40px;
 margin-top: 20;
 margin-left: 5px;
 padding: 0 15 0 15;
 background-color: rgba(25,16,69,0.85);
 border-radius: 5px; 
}
#menu .selected{
 background-color: rgba(255,255,255,0.85);
 border-style: solid;
 border-width: 3px;
 border-color: rgba(25,16,69,0.85); 
}
#menu .selected a{
 color: rgba(25,16,69,0.85);
}
#menu li a{
 text-decoration: none;
 color: white;
}
#menu li a:hover{
 color: #E49900;
}

#main{
 min-height: 350;
 position: relative; 
 display:block;
 background-color: rgba(255,255,255,0.85);
 width: 70%;
 margin-left: 15%;
 margin-right: 15%;
 margin-top: 340;
 padding: 15 15 15 15;
 border-radius: 10px;
 color: black; 
}
footer{
 position: relative;
 background-color: rgba(255,255,255,0.85);
 width: 70%;
 margin-left: 15%;
 margin-right: 15%;
 margin-top: 15;
 padding: 2.5 15 2.5 15;
 border-radius: 10px;
 display: inline-block;
 bottom: 5px;
 color: black;
 font-size: 80%;
 text-align: center;
}
#footer a{
 text-decoration: none;
 color: black;
}
#footer a:hover{
 color: #E49900;
}</code></pre>
</div>
</div>
</p>

<p>Thank you for all the tips :)</p>