CSS classes moving around with window resized - html

Question

I am making a portal for some students but every time they resize the browser window, the CSS classes move around.
I've been stuck on this for a few days now and I think I'm spending way too much time just trying to figure this part out.
I put the code in the post and I attached the background image. Is there a certain CSS rule that will make it where the CSS classes won't move when the browser moves?
Thanks!
Here's the CSS & HTML code:
.google-container {
overflow: hidden;
bottom: 2070px;
left: 350px;
padding-top: 56.25%;
position: relative;
}
.java-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.java-container iframe {
border: 0;
height: 400%;
right: 400px;
position: absolute;
top: 200px;
width: 100%;
}
.iframe-container {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 1538px;
position: absolute;
top: 180px;
width: 100%;
}
.sutori {
position: absolute;
bottom: 1878px;
left: 422px;
background-color: #33afff;
border: none;
font-size: 28px;
font-family: "Arial";
color: #FFFFFF;
padding: 20px;
width: 240px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.2s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.sutori:hover,
.sutori:focus {
background-color: #d3d3d3;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
bottom: 1825px;
left: 260px;
background-color: #d3d3d3;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.drivebutton {
position: absolute;
bottom: 510px;
left: 1190px;
background-color: #d54b3d;
border: none;
font-size: 28px;
font-family: "Arial";
color: #FFFFFF;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.2s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.drivebutton:hover,
.drivebutton:focus {
background-color: #d3d3d3;
}
.drivebutton:after {
content: "";
background: #000000;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.4s
}
.drivebutton:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.drivebutton-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.drivebutton:hover,
.drivebutton:focus {
background-color: #d3d3d3;
}
.drivebutton a:hover {
background-color: #ddd;
}
.classroombutton {
position: absolute;
bottom: 385px;
left: 1190px;
background-color: #d54b3d;
border: none;
font-size: 28px;
font-family: "Arial";
color: #FFFFFF;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.2s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.classroombutton:hover,
.classroombutton:focus {
background-color: #d3d3d3;
}
.classroombutton:after {
content: "";
background: #000000;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.4s
}
.classroombutton:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.classroombutton-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.classroombutton:hover,
.classroombutton:focus {
background-color: #d3d3d3;
}
.classroombutton a:hover {
background-color: #ddd;
}
.youtubebutton {
position: absolute;
bottom: 295px;
left: 1190px;
background-color: #d54b3d;
border: none;
font-size: 28px;
font-family: "Arial";
color: #FFFFFF;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.2s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.youtubebutton:hover,
.youtubebutton:focus {
background-color: #d3d3d3;
}
.youtubebutton:after {
content: "";
background: #000000;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.4s
}
.youtubebutton:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.youtubebutton-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.youtubebutton:hover,
.youtubebutton:focus {
background-color: #d3d3d3;
}
.youtubebutton a:hover {
background-color: #ddd;
}
.conbutton {
position: absolute;
bottom: 512px;
left: 816px;
background-color: #daa520;
border: none;
font-size: 28px;
font-family: "Arial";
color: #FFFFFF;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.2s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.conbutton:hover,
.mailbutton:focus {
background-color: #d3d3d3;
}
.conbutton:after {
content: "";
background: #000000;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.4s
}
.conbutton:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.conbutton-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.conbutton:hover,
.mailbutton:focus {
background-color: #d3d3d3;
}
.conbutton a:hover {
background-color: #ddd;
}
.mailbutton {
position: absolute;
bottom: 600px;
left: 1190px;
background-color: #d54b3d;
border: none;
font-size: 28px;
font-family: "Arial";
color: #FFFFFF;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.2s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.mailbutton:hover,
.mailbutton:focus {
background-color: #d3d3d3;
}
.mailbutton:after {
content: "";
background: #000000;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.4s
}
.mailbutton:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.mailbutton-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.mailbutton:hover,
.mailbutton:focus {
background-color: #d3d3d3;
}
.mailbutton a:hover {
background-color: #ddd;
}
.button {
position: absolute;
bottom: 450px;
left: 570px;
background-color: #33afff;
border: none;
font-size: 28px;
font-family: "Arial";
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.2s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #000000;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.4s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.button:hover,
.button:focus {
background-color: #000000;
}
.buttonflip {
position: absolute;
bottom: 510px;
left: 430px;
background-color: #18d71f;
border: none;
font-size: 28px;
font-family: "Arial";
color: #FFFFFF;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.2s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.buttonflip:hover,
.buttonflip:focus {
background-color: #d3d3d3;
}
.buttonflip:after {
content: "";
background: #000000;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.4s
}
.buttonflip:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.buttonflip-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.buttonflip:hover,
.buttonflip:focus {
background-color: #d3d3d3;
}
.buttonflip a:hover {
background-color: #ddd;
}
.sketchfabbutton {
position: absolute;
bottom: 295px;
left: 1190px;
background-color: #d54b3d;
border: none;
font-size: 28px;
font-family: "Arial";
color: #FFFFFF;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.2s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.sketchfabbutton:hover,
.sketchfabbutton:focus {
background-color: #d3d3d3;
}
.sketchfabbutton:after {
content: "";
background: #000000;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.4s
}
.sketchfabbutton:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.sketchfabbutton-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.sketchfabbutton:hover,
.sketchfabbutton:focus {
background-color: #d3d3d3;
}
.sketchfabbutton a:hover {
background-color: #ddd;
}
.sketchbutton {
position: absolute;
bottom: 385px;
left: 430px;
background-color: #107014;
border: none;
font-size: 28px;
font-family: "Arial";
color: #FFFFFF;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.2s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.sketchbutton:hover,
.sketchbutton:focus {
background-color: #d3d3d3;
}
.sketchbutton:after {
content: "";
background: #000000;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.4s
}
.sketchbutton:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.sketchbutton-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.sketchbutton:hover,
.sketchbutton:focus {
background-color: #d3d3d3;
}
.sketchbutton a:hover {
background-color: #ddd;
}
.eastbutton {
position: absolute;
bottom: 629px;
left: 816px;
background-color: #0091b2;
border: none;
font-size: 28px;
font-family: "Arial";
color: #FFFFFF;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.2s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.eastbutton:hover,
.eastbutton:focus {
background-color: #d3d3d3;
}
.eastbutton:after {
content: "";
background: #000000;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.4s
}
.eastbutton:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.eastbutton-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.eastbutton:hover,
.eastbutton:focus {
background-color: #d3d3d3;
}
.eastbutton a:hover {
background-color: #ddd;
}
body {
background-image: url("backtest2.png");
background-repeat: no-repeat;
background-position: right 400% bottom 101%;
background-size: 1920px 1000px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EAST Portal!</title>
<div class="iframe-container">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FEAST-at-Gentry-Public-Schools-405756842946474%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
width="340" height="500" style="border:none;overflow:hidden;" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
<body scroll="no" style="overflow: hidden">
<div class="google-container" <center>
<form method="GET" action="https://www.google.com/search">
<a href="https://www.google.com/search?safe=vss">
<img src="https://www.edigitalagency.com.au/wp-content/uploads/google-logo-png-transparent-background-large-new-800x270.png" border="0" alt="Google" width="115" height="39" align="absmiddle"></a><br>
<input type="text" name="q" size="15" maxlength="255" value="" style="width:220px;height:40px;font-size:12px;border-style:solid; border-width:1px;">
<input type="submit" name="sa" value="Search" style="width:100px;height:40px;font-size:18px; padding-top:-20;"><input type="hidden" name="safe" value="strict">
</td>
</tr>
</tbody>
</table>
</form>
</center>
</div>
<style>
p {
position: fixed;
bottom: 750px;
left: 1200px;
font-size: 34px;
font-family: "Arial";
margin-top: 5px;
}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="sutori">Sutori</button>
<div id="myDropdown" class="dropdown-content">
Sutori
EAST Sutori
Photography Club
</div>
</div>
</head>
<body>
Flipgrid</button>
Gmail</button>
Google Drive</button>
Google Classroom</button>
EAST</button>
Digital Nature Museum</button>
Conference Sign-up Sheet</button>
YouTube</button>
YouTube</button>
</body>
</html>