Esta es mi primera página web, por lo tanto habrá fallos en la estructura del código. He creado un `button`, le he aplicado CSS en una stylesheet para la posición, pero en ninguna página es la posición del botón igual. 
Cómo puedo solucionar esto?

Aquí os dejo el CSS y HTML (lo que falla es el `dropdown-button`, la posición es distinta en estas dos páginas, pero el CSS es el mismo):
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>

    <head>
    <title>HomePage</title>
    <link rel="stylesheet" type="text/css" href="Opmaak.css">
    <link rel="shortcut icon" href="logo.ico">
    </head>

    <body>

    <h1>WELKOM OP MIJN SITE!</h1>

    <div class="nav">
    <div class="body">
    <hr>
    <div class="warning">
    	<img src="warning_icon.png" alt="warning icon" style="width:40px;height:40px;border:0px;">
    </div>

    <i>Deze website is een test voor informatica.</i>

    <p style="text-align:left;margin-left:14%;margin-right:5%;">Hey, welkom op mijn site. Dit is een test site, dus het is niet definitief. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br>
    	Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
    	sit amet commodo magna eros quis urna.
    	
        Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
    	Proin pharetra nonummy pede. Mauris et orci.
    </p> 
    </div>

    <hr>

    <ul>
      <li><a class="active" href="index.html">Home</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li class="aboutme"><a href="aboutme.html">About</a></li>
      <li><a class="games" href="games.html">Games</a></li>
    </ul>




    <div class="dropdown">
      <button class="dropbtn">Multimedia</button>
      <div class="dropdown-content">
        <a href="mp4.html">MP4</a>
        <a href="png.html">PNG</a>
        <a href="gif.html">GIF</a>
      </div>
    </div>
      
    </div>



    </body>
    </html>


<!-- end snippet -->

 

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <head>
    <title>Contact</title>
    <link rel="shortcut icon" href="logo.ico">
    <link rel="stylesheet" type="text/css" href="Opmaak.css">
    </head>
    <body>

    <h1>CONTACT</h1>
    <div class="nav">

    <hr>

    <div class="body">
    	<p>Hieronder zie je een aantal mogelijkheden van hoe u mij kan bereiken: </p>
    	<p>Email : [email protected]</p>
    	<p>Mobiele nummer : +31689675394</p> 
    	<p>Twitter : @RandomName</p>
    </div>

    <hr>

    <div class="dancingman">
     <img src="dancingman.gif-c200" alt="dancingman" style="width:200px;height:200px;border:0px;">
    </div>

    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a class="active" href="contact.html">Contact</a></li>
      <li class="aboutme"><a href="aboutme.html">About</a></li>
      <li><a class="games" href="games.html">Games</a></li>
    </ul>


    <div class="dropdown">
      <button class="dropbtn">Multimedia</button>
      <div class="dropdown-content">
        <a href="mp4.html">MP4</a>
        <a href="png.html">PNG</a>
        <a href="gif.html">GIF</a>
      </div>
    </div>
    </div>



    </body>
    </html>


<!-- end snippet -->

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

   h1 {text-align:center;background:linear-gradient(to right, gray, black);color:white;position:fixed;top:0px;width:100%;height:7.4%;z-index:1000; margin:0; font-family:font_h1;font-size:33px; }
body {text-align:center;background-color:#fffff;font-size:20px; margin:0;}
a {font-size:30px;}
@font-face {
    font-family: font_h1;
    src: url(lifestyle.ttf);
}

.warning {position:relative;top:34px;right:200px;}
.nav{margin-left:10%;margin-top:5%;padding:1px 16px;height:1000px;}
.pikachu{position:relative;right:25px;bottom:38px;}
.dancingman{position:relative;right:27px;bottom:29px;}
.icon_home{font-size:30px;position:relative;bottom:1001px;left:3px;}
.icon_contact{font-size:30px;position:relative;bottom:51px;left:3px;}
.mario {position:relative;bottom:10px;height:400px;width:300px;}
.manmetjas{position:relative;top:10px;height:400px;width:400px;}
.textbody {margin-left:10%;margin-right:4%;text-align:left;}
.textbody2 {margin-left:10%;margin-right:4%;text-align:left;}
.textbodygif {margin-left:18%;margin-right:4%;text-align:left;}
.teamfoto {position:relative;top:50px;}
.games {position:fixed;top:203px;width:13.2%;}
.aboutme {position:fixed;top:250px;width:15.6%;}
.pingpong {position:relative;height:170px;width:200px;right:206px;top: 60px;}
.mariobros {position:relative;height:170px;width:200px;right:196px;top: 100px;}
iframe {
position:relative;
top:40px;
padding-bottom:50px;

}
a.game:link {color:blue; background-color:transparent; text-decoration:none;font-size:25px;}
a.game:visited{color:blue; background-color:transparent; text-decoration:none;font-size:25px;}
a.game:hover{color:red; background-color:transparent; text-decoration:underline;font-size:25px;}
p.pingpong2{position:relative;bottom:100px;left:415px;text-align:left; width:500px; margin-top:20px; }
p.mario2{position:relative;bottom:60px;left:423px;text-align:left; width:500px; margin-top:20px;}
span.titlegame1 {position:relative; bottom:88px; right: 187px;font-size: 25px;}
span.titlegame2 {position:relative; bottom:48px; right: 170px;font-size: 25px;}
hr {opacity:0.6; margin-left:5.3%;}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15.6%;
    background-color: #e0e0e0;
    position: fixed;
    height: 600px;
    overflow: auto;
	right:1129px;
	top:47px;
	border:1px solid #939496;
	left:0px;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
	font-size:30px;
	
}


button:hover{
 background-color: #4dd6e2;
    color: white;
}


li a.active {
    background-color: #309ba5;
    color: white;
}

li a:hover:not(.active) {
    background-color: #4dd6e2;
    color: white;
}


.dropbtn {
    background: #e0e0e0 url('dropdown_icon.png') no-repeat 0;
    background-size: 25px 25px;
	background-position:96% 65%;
    color: black;
    padding: 16px 25px;
    font-size: 30px;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: Times New Roman;
	position:fixed;
	left: 1px;
	top:148px;
	width: 210px;
	height: 55px;
	z-index:0;
}


.dropdown {
    position: relative;
    display: inline-block;
}


.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 90px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
	bottom:20px;
	right:439px;
}


.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}


.dropdown-content a:hover {background-color: #f1f1f1}


.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #4dd6e2;
}
<!-- end snippet -->