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 -->