My CSS content keeps moving vertically on my website? - html

Question

So basically I am trying to make a search engine page. The hr does not want to align in the center. On top of that when I resize the page in height it sends the text in the middle and the search bar diagonally left. I am unsure what I am doing wrong. I find positioning in CSS so so hard.
I am unsure on if I am positioning correctly. I was trying to lock my content down by using vh and vw. However I have a lot of trouble locking everything down vertically.
Live Preview" https://codepen.io/thanksfortheride136/project/editor/DYaryO
#indexbody {
background-image: url("/school.jpg");
background-size: 100% auto;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
/*controls size of logo link box*/
.logo a {
display: block;
height: auto;
}
li {
list-style: none;
}
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: #2f2e2e;
color: #2f2e2e;
font-family: 'Open Sans';
z-index: 1;
}
.navbaratlus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: transparent;
color: #2f2e2e;
font-family: 'Open Sans';
z-index: 1;
}
.nav-links a {
color: #fff;
}
/* LOGO */
.logo img {
width: 230px;
height: 75px;
}
/* NAVBAR MENU */
.menu {
display: flex;
gap: 1em;
font-size: 20px;
z-index: 1;
}
.menu li:hover {
background-color: #1a1a1a;
transition: 0.1.5s ease;
}
/*everytime i adjust sizing i usually need to adjust sizing on the dropdown menu too*/
.menu li {
padding: 25px 24px;
padding-left: 5px;
border-left: 1px solid white;
display: inline-block;
width: 200px;
z-index: 1;
}
.home {
border-left: 1px solid white;
}
/* DROPDOWN MENU */
.classes {
position: relative;
}
.dropdown {
background-color: #1a1a1a;
padding-top: 1em;
position: absolute;
/*WITH RESPECT TO PARENT*/
display: none;
top: 70px;
}
.dropdown li+li {
margin-top: 10px;
}
.dropdown li {
padding: 0.5em 1em;
width: 8em;
}
.dropdown li:hover {
background-color: #2f2e2e;
width: 100%;
}
.classes:hover .dropdown {
display: block;
}
/*RESPONSIVE NAVBAR MENU STARTS*/
/* CHECKBOX HACK */
input[type=checkbox] {
display: none;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
#media (max-width: 768px) {
.menu {
display: none;
position: absolute;
background-color: teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color: #4c9e9e;
transition: 0.3s ease;
}
.menu li+li {
margin-top: 12px;
}
input[type=checkbox]:checked~.menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
.footercontainer {
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
background-color: #2f2e2e;
border: 5px solid green;
}
.atlasbar[type=text] {
padding: 6px;
font-size: 17px;
font-family: 'open sans';
color: white;
display: block;
position: absolute;
height: 40px;
width: 35%;
z-index: 1;
top: 30vh;
left: 50vh;
right: 50vh;
box-shadow: inset 0 0 50px #000, /* inner color*/
inset 20px 0 80px #000, /* inner left short*/
inset -20px 0 80px #0ff, /* inner right short*/
inset 20px 0 300px #f0f, /* inner left broad*/
inset -20px 0 300px #0ff, /* inner right broad*/
0 0 10px #fff, /* outer color*/
-1px 0 10px #f0f, /* out left color*/
1px 0 10px #0ff; /* outer right color*/
}
::placeholder {
color: white;
}
.atlascontainer {
display: block;
height: 35vh;
width: 100vw;
position: absolute;
border: 1px solid red;
}
.title {
font-family: 'Akshar', sans-serif;
color: white;
font-size: 100px;
text-align: center;
display: block;
position: absolute;
width: 35%;
z-index: 1;
top: 10vh;
left: 50vh;
right: 50vh;
}
hr {
color: white;
display: block;
z-index: 1;
margin-top: 27vh;
margin-left: 50vw;
margin-right: 50vw;
width: 30%;
position: absolute;
}
p {
font-family: 'Open Sans', sans-serif;
color: white;
text-align: center;
display: block;
position: absolute;
width: 35%;
top: 23vh;
left: 50vh;
right: 50vh;
z-index: 1;
}
.atlasimage {
display: block;
position: absolute;
width: 50%;
height: 100%;
right: 0;
top: 0;
z-index: -1;
}
body {
height: 100vh;
}
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Akshar&family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<nav class="navbaratlus">
<!-- LOGO -->
<div class="logo">
</div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li class='home'>Home</li>
<li class="classes">Classes
<!-- DROPDOWN MENU -->
<ul class="dropdown">
<li>AP CS</li>
<li>STEM</li>
<li>Media Arts</li>
<li> Physics</li>
<li>Tech 8</li>
</ul>
</li>
<li>Atlas</li>
<li>Curriculum</li>
<li>Contact</li>
</div>
</ul>
</nav>
<div class='atlascontainer'>
<input type="text" placeholder="Search.." class="atlasbar">
<h1 class='title'>ATLAS</h1>
<p>A Technology Learning Aid System</p>
<hr>
</div>
<img src="editedatlas.png" alt="" class='atlasimage'>
<div class='footercontainer'></div>