We Keep Coding

My toggle button will not switch from left to right, I have coded in JavaScript and cannot find the bug?

First someone suggested it was a typo with my classList property and I made the necessary changes but it still is not working. I have js node downloaded but it still is not responding. Can anyone help? I cant yet find the bug i need some extra help. I have posted my css javascript and html files below
Here is my work..
var btn = document.getElementById("btn");
function togglebtn() {
btn.classList.toggle(".active");
}
*{
margin: 0;
padding: 0;
font-family: 'poppins', sans-serif;
box-sizing: border-box;
}
.hero{
background: #1d2026;
min-height: 100vh;
width: 100%;
color: #fff;
position: relative;
}
nav{
display: flex;
align-items: center;
}
nav .menu{
padding-right: 30px;
padding-left: 10px;
padding-bottom: 40px;
cursor: pointer;
}
nav .logo{
width: 500px;
height: 200px;
object-fit: none;
padding-right: 50px;
padding-bottom: 60px;
}
nav ul{
flex: 1;
text-align: right;
margin-right: 20px;
}
nav ul li{
display: inline-block;
list-style: none;
margin-right: 20px;
padding-bottom: 100px;
font-size: 25px;
margin: 0 20px;
}
nav ul a{
text-decoration: none;
color: #fff;
}
nav button{
background: #efefef;
height:30px ;
width: 60px;
border-radius: 20px;
border: 0;
outline: 0;
cursor: pointer;
margin-bottom: 100px;
margin-right: 20px;
}
nav button span{
display: block;
background: #999;
height: 26px;
width: 26px;
border-radius: 50%;
margin-left: 2px;
}
.lamp-set{
position: absolute;
top: -20px;
left: 22%;
width: 200px;
}
.lamp{
width: 100%;
}
.light{
position: absolute;
top: 97%;
left: 50%;
transform: translateX(-50%);
width: 700px;
margin-left: -10px;
opacity: 1;
}
.text-container{
max-width: 1000px;
margin-top: 2%;
margin-left: 50%;
}
.text-container h1{
font-size: 80px;
font-weight: 400;
display: inline-block;
color: #fff;
}
.text-container p{
font-size: 40px;
font-weight: 200;
display: inline-block;
color: #fff;
margin-top: 10px;
}
.emails{
background: #00a8f3;
padding: 14px 40px;
display: inline-block;
color: #fff;
font-size: 25px;
margin-top: 30px;
margin-left: 50%;
border-radius: 30px;
}
.active{
background: turquoise;
}
.active span{
background:#ffff ;
margin-left: 31px;
}
<div class="hero">
<nav>
<img src="menu.png" class="menu">
<img src="ovlogo.png" class="logo">
<ul>
<li>
<a href="">
Home
</li>
<li><a href="">contact</li>
<li><a href="">shop</li>
</ul>
<button type="button" onclick="togglebtn()" id="btn"><span></span></button>
</nav>
<div class="lamp-set">
<img src="lamp.png" class="lamp">
<img src="light.png" class="light">
</div>
<div class="text-container">
<h1>One Stop Shop.</h1>
<p>Get the latest "as seen on" products and appliances that fit you and your everyday needs.We specialize in variety and identifying cunsumer sentiment to maximize the expirence with overviral, your online marketplace. </p>
</div>
<div class="emails">
subscribe for emails
</div>
</div>

You have to remove the "." from the toggle function className.
function togglebtn() {
btn.classList.toggle("active"); // remove the "." from the class name
}

Footer only works when Zoom Text Only is set in Firefox, text overflows if no Zoom Text Only?

I have a semi-working HTML template for a car showroom, but this can be modified for any items for sale list:
body {
background-color: #FFF;
font-family: Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
}
header.sct1 {
background-color: #2B60DE;
border-radius: 0px;
color: #FFF;
margin: 10px;
padding: 20px;
}
img.logo1 {
width: 200px;
}
.wrapper {
border: 2px solid;
}
.content {
background-color: #FFF;
margin: 10px;
width: 800px;
margin-left: 20px;
}
footer.sct1 {
background-color: #2B60DE;
color: #FFF;
margin: 10px;
padding: 10px;
}
footer.caautos h2, footer.caautos h3 {
margin: 10px;
}
div.caautos1 {
width: 900px;
display: inline-grid;
grid-template-columns: 400px 2fr;
grid-column: 1 / span 1;
column-gap: 90px;
}
div.content {
background-color: #FFF;
width: 800px;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
div.content p {
margin-left: 5px;
}
.results-vehicleresult {
margin: 20px;
}
.columns-vehicleresult {
border-radius: 0px;
background-color: #FFFFFF;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
border: 2px solid;
margin-bottom: 20px;
}
.columns-vehicleresult {
font-size: 0.8rem;
margin-left: 90px;
}
.columns-vehicleresult .column {
flex: 33.33%;
}
/*
.columns-vehicleresult .column p {
color: #333;
font-family: HelveticaCondensed, sans-serif;
font-size: 14px;
transform:scaleX(1.2);
width: 400px;
margin-left: 20px;
margin-top: 20px;
text-transform: uppercase;
}
*/
.columns-vehicleresult .column p {
color: #333;
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight: 400;
margin-left: -5px;
margin-top: 30px;
}
.columns-vehicleresult .column p b {
font-family: Helvetica, sans-serif;
font-weight: 600;
}
h1.eurola {
font-size: 240%;
}
.vehiclesold {
color: red;
}
picture {
flex-direction: row;
max-width: 46%;
margin-left: -20px;
}
/*
picture img {
max-width: 350px;
height: auto;
margin-right: 2px;
margin: 30px;
}
*/
/*
picture img {
max-width: 350px;
height: auto;
max-width: 340px;
margin-right: 2px;
margin: 30px;
}
*/
/*
picture img {
display: inline-block;
width: 262px;
height: 198px;
margin-right: 5px;
margin: 30px;
}
*/
picture img {
display: inline-block;
width: 262px;
margin-right: 5px;
margin: 30px;
}
picture::after {
content: "Image for illustration purposes only";
display: block;
top: 50%;
transform: translateY(-240%);
font-weight: 600;
font-size: 11px;
margin-left: 30px;
}
ul.mauen {
background-color:#333;
color: #FFF;
list-style-type: none;
margin: 0;
padding: 0;
}
ul.mauen li {
float: left;
}
ul.mauen a {
display: block;
padding: 8px;
background-color: #dddddd;
}
ul.imagallery1 {
list-style-type: none;
margin-top: -5px;
margin-left: -30px;
}
.imagallery1 li {
display: inline;
margin: 0;
}
/*
.imagallery1 img {
width: 20%;
height: auto;
}
*/
.imagallery1 img {
background: rgb(247, 247, 245);
width: 100px;
height: 75px;
}
img.hald {
width: 230px;
}
div.logo-112 h2 {
color: yellow;
font-size: 36px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #FFF;
}
.logo-112 blockquote {
font-weight: 700;
}
img.imglogo1 {
height: 320px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chelsea Motors - Jacksdale, Nottinghamshire - Used cars in Notts, Derbyshire</title>
<link rel="stylesheet" type="text/css" href="styles1/chelsea-motors-jacksdale.css">
</head>
<body>
<div class="wrapper">
<header class="sct1">
<h2>YOUR CAR SHOWROOM</h2>
</header>
<div class="content">
<p>Welcome to Your Car Showroom</p>
<div class="results-vehicleresult">
<div class="columns-vehicleresult">
<picture>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/2000_Chrysler_Cirrus_%2826663723242%29.jpg/1920px-2000_Chrysler_Cirrus_%2826663723242%29.jpg">
</picture>
<div class="column">
<p><b>2000 CHRYSLER CIRRUS 3.0 V6 LXi 4dr</b> gold <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div>
<div class="columns-vehicleresult">
<picture>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/2000_Chrysler_Cirrus_%2826663723242%29.jpg/1920px-2000_Chrysler_Cirrus_%2826663723242%29.jpg">
</picture>
<div class="column">
<p><b>2000 CHRYSLER CIRRUS 3.0 V6 LXi 4dr</b> gold <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div><div class="columns-vehicleresult">
<picture>
<img src="https://live.staticflickr.com/65535/51153373086_9061d66b91_z.jpg">
</picture>
<div class="column">
<p><b>1993 CHEVROLET BUICK CENTURY LIMITED 3.8 V6</b> 4dr, blue <b>£3995</b></p>
</div>
<div class="column">
<ul class="imagallery1">
</ul>
</div>
</div>
</div>
</div>
<footer class="sct1">
<div class="caautos1">
<h1>1 Anytown Road, Worksop, Nottinghamshire S80 1AN</h1>
<h1>✆ 01909 496000</h1>
</div>
</footer>
© 2022
</div>
</body>
</html>
For some reason, text overflows if you've set 130% zoom on Firefox as default (which I need to in my default profile) for the div.caautos part within the footer, is there a way to fix CSS per-zoom and make this look slightly better?
It's functional but I want to try and fix any mistakes regarding aesthetics and zoom to ensure it looks and works properly.

when you change page zoom, the browser changes resolution. use #media for a specific resolution.
you can read about that here.

How to remove Horizontal scroll bar

i get this horizonatal scroll bar when i add my content to my "section3__container" container even if they are small in size . I have tried alot of things like overFlow hidden overflow-x hidden reducing size of content but the horizontal bar keeps appearing. i need help to remove this horizontal scroll bar.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="/static/styles/style.css" type="text/css">
<link rel='icon' href='/static/images/logo.jpeg' type='image/x-icon'/>
</head>
<body>
<div id="container">
<div id="container__section1">
<nav id="container__section1__destopNav">
chinaza
<ul>
<li class="navItem" ><span id="active"></span> Home</li>
<li class="navItem"><span></span>About</li>
<li class="navItem"><span></span>skill</li>
<li class="navItem"><span></span>Service</li>
<li class="navItem"><span></span>Project</li>
<li class="navItem"><span></span>Contact</li>
<li class="navItem"><a href=""><i class="fa fa-moon-o" aria-hidden="true"></i>
</a></li>
</ul>
</nav>
<nav id="container__section1__mobilepNav">
<ul id="container__section1__mobilepNav__container">
<li id="container__section1__mobilepNav__container__1">chinaza</li>
<li id="container__section1__mobilepNav__container__2">
<ul id="container__section1__mobilepNav__container__2_1">
<li id="theme">
<i class="fa fa-moon-o" aria-hidden="true"></i>
</li>
<li id="menu">
<i class="fa fa-bars" aria-hidden="true"></i>
</li>
<ul id="menu_content">
<li class="navItem"><span></span> Home</li>
<li class="navItem"><span></span>About</li>
<li class="navItem"><span></span>skill</li>
<li class="navItem"><span></span>Service</li>
<li class="navItem"><span></span>Project</li>
<li class="navItem"><span></span>Contact</li>
</ul>
</ul>
</li>
</ul>
</nav>
</div>
<div id="section2" >
<ul id="section2__container">
<li id="section2__container__text" class="section2__container__class">
<ul id="section2__container__text__container">
<li>
<ul id="section2__container__text__container__textContainer__socialMedia">
<li><i class="fa fa-github" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin-square" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter-square" aria-hidden="true"></i></li>
</ul>
</li>
<li id="section2__container__text__container__textContainer">
<h1>Hi, Am Chinaza</h1>
<h4>Frontend developer </h4>
<p> high level experience in web
design and development knowledge,
producing quality work
</p>
<div id="section2__container__text__container__textContainer__container">Contact me</div>
</li>
</ul>
</li>
<li id="section2__containerImage" class="section2__container__class">
<div id="section2__containerImage__container1" class="section2__containerImage__containers">
<div id="section2__containerImage__container2" class="section2__containerImage__containers">
<img src="static/images/about3.svg " alt="">
</div>
</div>
</li>
</ul>
</div>
<div id="section3">
<h1 id="section3__about">About me</h1>
<h4 id="section3_introduction">My introduction</h4>
<ul id="section3__container">
<li id="section3__container__1" class="section3__container__items">
<img src="static/images/undraw_Developer_activity_re_39tg.svg" alt="">
</li>
<li id="section3__container__2" class="section3__container__items">
<p>web developer, with extensive knowledge
and years of experience, working in web
technology and UI/Ux design, delivering quality
work.
</p>
<ul id="section3__container__2__container">
<li>
<h1>3 +</h1>
<p>Years experinece</p>
</li>
<li>
<h1>3</h1>
<p>Completed project</p>
</li>
<li>
<h1>1</h1>
<p>Companies worked</p>
</li>
</ul>
<div id="section3__container__2__download">
Download <i class="fa fa-arrow-circle-down" aria-hidden="true"></i>
</div>
</li>
</ul>
</div>
</div>
<script src="/static/home.js"></script>
</body>
</html>
$navFontSize: 18px;
$navcolor:black;
$maincolour: rgb(54, 54, 168);
$fadeAsh:rgb(114, 112, 112);
$minwidth:290px;
$h1FontSize:40px;
$h4FontSize:20px;
$h1FontSizeMobile:30px;
$h4FontSizeMobile:20px;
$paragraph:23px;
#mixin button {
width: 170px;
height: 45px;
text-align: center;
line-height: 45px;
margin-top: 40px;
a{
text-decoration: none;
display: inline-block;
width: 100%;
height: 100%;
font-size: 20px;
border: 2px solid $maincolour;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background-color: rgb(236, 232, 247);
transition: background-color 1s;
}
&:hover a{
background-color: $maincolour;
color: white;
border: none;
}
}
*{
margin: 0;
padding: 0;
}
#container{
width: 100vw;
height: 100vh;
}
#container__section1{
width: 100%;
height: 80px;
z-index: 2000;
#container__section1__destopNav{
width:100%;
height: 100px;
position: fixed;
z-index: 200;
#logo{
text-decoration: none;
padding: 30px;
line-height: 30px;
color: $navcolor;
font-size:25px;
}
ul{
display: flex;
flex-direction: row;
text-align: center;
margin: 0 auto;
width: 600px;
list-style: none;
justify-content: space-evenly;
li{
position: relative;
padding: 9px;
span{
position: absolute;
bottom: 0;
left: 0;
height: 0px;
width: 0;
transition: width 2s height 4s;
background-color: rgb(54, 54, 168);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
#active{
height: 3px;
width: 100%;
background-color: $maincolour;
}
a{
text-decoration: none;
font-size: $navFontSize;
color: $navcolor;
width: 100%;
padding: 5px;
}
}
li:hover span{
height: 3px;
width: 100%;
background-color: rgb(81, 100, 209);
}
}
}
}
#section2{
width: 100%;
height: auto;
z-index: -1;
margin-top: 70px;
min-width: $minwidth;
#section2__container{
width: 85%;
display: flex;
flex-wrap: wrap-reverse;
list-style: none;
margin: 0;
padding: 0;
margin: 0 auto;
justify-content: space-evenly;
height: 100%;
.section2__container__class{
list-style: none;
height: 400px;
.section2__containerImage__containers{
margin-top: 40px;
width: 270px;
height: 270px;
}
#section2__containerImage__container1{
position: relative;
transform: translateY(4px) rotateZ(-5deg);
background-color: #3636a8;
margin: 0 auto;
}
#section2__containerImage__container2{
position: absolute;
bottom: 0;
transform: translateY(4px) rotateZ(5deg);
img{
width: 100%;
height: 100%;
}
}
}
#section2__container__text #section2__container__text__container{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
height: 100%;
#section2__container__text__container__textContainer__socialMedia{
flex: 1;
width: 100px;
height: 200px;
list-style: none;
vertical-align : middle;
margin-top: 90px;
padding: 0;
padding-right: 30px;
li{
padding-top: 25px;
font-size: 20px;
color:rgb(54, 54, 168);
}
}
#section2__container__text__container__textContainer{
flex: 2;
h1{
font-size: $h1FontSize;
margin-top: 20px;
}
h4{
color: $fadeAsh;
font-size: 23px;
margin-top: 15px;
}
p{
color: $fadeAsh;
margin-top: 15px;
width: 330px;
font-size: 20px;
}
#section2__container__text__container__textContainer__container{
#include button()
}
}
}
}
}
#section3{
width: 100%;
overflow-x: hidden;
#section3__about{
overflow-x: hidden;
text-align: center;
font-size: $h1FontSize;
}
#section3_introduction{
text-align: center;
color:$fadeAsh;
font-size: $h4FontSize;
margin-top: 25px;
}
#section3__container{
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 0 auto;
height: fit-content;
list-style: none;
margin-top: 60px;
#section3__container__1{
text-align: center;
img{
width: 314px;
height: 314px;
}
}
.section3__container__items{
flex: 1;
}
#section3__container__2 {
p{
width: 70%;
color: $fadeAsh;
font-size: $paragraph;
}
#section3__container__2__container{
list-style: none;
display: flex;
flex-wrap: nowrap;
margin-top: 30px;
width: 85%;
li{
text-align: center;
width: 100%;
}
li h1{
text-align: center;
}
}
#section3__container__2__download{
#include button()
}
}
}
}
#container__section1__mobilepNav{
display: none;
}
#media(max-width:1024px){
#container{
height: 100%;
}
#container__section1__destopNav{
display: none;
}
#container__section1__mobilepNav{
display:inline-block;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 65px;
box-shadow:0px 4px 20px rgb(189, 188, 188);
z-index: 1;
#container__section1__mobilepNav__container{
height: 60px;
box-shadow:0px 4px 20px rgb(189, 188, 188);
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
padding-top: 20px;
background-color: white;
li{
width: 100px;
}
li #logo2{
text-decoration: none;
font-size:20px;
padding-left: 20px;
}
#container__section1__mobilepNav__container__1{
text-align: left;
}
#container__section1__mobilepNav__container__2{
#container__section1__mobilepNav__container__2_1{
display: flex;
list-style: none;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
width: 100px;
#menu_content{
position: absolute;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
width:0%;
padding-top: 46px;
height:0rem;
top: -173px;
left: 0;
transition: width 2s height 4s;
list-style: none;
height:9rem;
width:100%;
display: none;
:nth-child(2){
text-align: left;
}
.navItem a{
text-decoration: none;
}
}
#menu{
&:hover + #menu_content{
height:9rem;
width:100%;
display: block;
display: flex;
justify-content: space-around;
}
}
}
}
}
}
#section2{
margin-top: 0px;
#section2__container{
width: 100%;
.section2__container__class{
.section2__containerImage__containers{
margin-top: 40px;
width: 210px;
height: 210px;
}
}
}
}
#section3{
#section3__about{
font-size:$h1FontSizeMobile;
}
#section3__container{
width: 100%;
#section3__container__1{
text-align: center;
img{
width: 210px;
height: 210px;
}
}
}
#section3__container #section3__container__2{
text-align: center;
p{
width: 90%;
margin: 0 auto;
}
#section3__container__2__container{
width: 100%;
}
#section3__container__2__download{
margin: 0 auto;
margin-top: 40px;
}
}
}
}
#media(max-width:690px){
#section2__container__text{
width: 100%;
min-width:$minwidth;
}
#section2__containerImage{
position: relative;
}
#section2__container__text__container__textContainer__socialMedia{
position: absolute;
top: 50px;
}
#section2 #section2__container #section2__container__text #section2__container__text__container
{
width: 90%;
margin: 0 auto;
}
#section2 #section2__container #section2__container__text #section2__container__text__container
#section2__container__text__container__textContainer{
margin: 0 auto;
p{
width: 90%;
}
h1{
font-size: 30px;
}
}
#section2 #section2__container .section2__container__class{
height: 300px;
}
}```

body {
overflow-x: hidden; /* Hide horizontal scrollbar */
}
Resource: W3Schools

Align Vertically for all screens

.page-section {
background-color: #035DA9;
font-family: "Mulish", sans-serif;
}
.logo-image {
width: 270px;
margin: 12px 0px 0px 12px;
}
.header-section {
display: flex;
}
.navbarLinks {
color: white;
margin-top: 40px;
position: absolute;
right: 0px;
}
.navbarLinks a {
text-decoration: none;
background-color: transparent;
margin-right: 39px;
color: white;
}
.middle-section{
width: 100vw;
margin-left: -8px;
}
.md-sec-1 {
background-color: #203546;
display: flex;
}
.middle-section-image {
width: 270px;
background-color: transparent;
padding: 50px;
}
.text-section {
color: white;
margin-top: 20px;
}
.text-section p{
word-spacing: 5px;
}
.md-sec-2{
color: white;
margin-top: auto;
margin-bottom: auto;
}
.md-sec-2 h3 {
text-align: center;
}
.footer-section {
background-color: white;
height: auto;
position: absolute;
width: 100vw;
bottom: 0px;
margin-left: 0px;
display: flex;
}
.btn {
color: white;
background: #203546;
border: 0px;
border-radius: 4px;
display: block;
margin-left: auto;
margin-right: auto;
/* margin-left: 47%; */
padding: 10px 20px;
margin-top: 12px;
}
.icons{
padding: 17px;
padding-left: 30px;
}
.icons a{
text-decoration: none;
background-color: transparent;
padding: 0px 6px;
}
.color-black {
color: black;
}
#media only screen and (max-width: 900px){
.update-contact-section{
margin-right: 10px !important;
}
}
#media only screen and (max-width: 800px){
.update-image{
display: inherit !important;
height: auto;
}
.navbarLinks a {
margin-right: 10px;
}
.navbarLinks {
margin-top: 12px;
}
.logo-update {
width: 140px;
margin-left: 0px;
margin-top: 0px;
}
.image-responsive {
display: block;
margin-left: auto;
margin-right: auto;
width: 57%;
}
.header-section-update {
height: 7vh;
}
.header-center{
text-align: center;
margin-top: -40px;
/* font-size: 40px; */
}
.para-update {
padding: 0px 10px;
/* font-size: 30px; */
}
.fa-icon-update {
font-size: 10px;
padding-left: 0px;
}
.footer-text-update {
font-size: 10px;
margin-top: 21px;
}
.contact-update {
font-size: 8px;
margin-top: 23px;
}
.icons {
padding-left: 0px;
}
.text-section {
padding-bottom: 20px;
}
}
#media only screen and (max-width: 400px){
body{
font-size: 12px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Intern guys</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./app.css">
<script src='./font-awesome.js'></script>
</head>
<body class="page-section">
<div>
<div class="header-section header-section-update">
<div class="logo-section">
<img src="./images/logo_image.png" alt="logo" class="logo-image logo-update" />
</div>
<div class="navbarLinks">
Home
About us
Register
</div>
</div>
<div class="middle-section">
<div class="md-sec-1 update-image">
<div class="image-section">
<img src="./images/final-mid-image.png" alt="image" class="middle-section-image image-responsive" />
</div>
<div class="text-section">
<h3 class="header-center">WELOME TO THE INTERN GUYS</h3>
<P class="para-update">Congratulations, you have made the first and last step required to get your internship. Start by
creating your profile and you are up and ready for the internship.
But don't worry everything is automated, we know exactly where are the pain points are and
that’s why we promise to make this as smooth as possible.
<i>After all, we are the Inten guys</i>.
</P>
</div>
</div>
<div class="md-sec-2 btn-update">
<h3 class="quote-update">We are started by the students, built by the students and for the students</h3>
<button class="btn">Start now</button>
</div>
<div class="footer-section">
<div class="icons" style="width: 33vw;">
<i class='fab fa-twitter color-black fa-icon-update'></i>
<i class='fab fa-instagram color-black fa-icon-update'></i>
<i class='fab fa-linkedin color-black fa-icon-update'></i>
<i class='fab fa-tiktok color-black fa-icon-update'></i>
</div>
<div style="width: 33vw;">
<p style="text-align: center; " class="footer-text-update">Built with love in Irvine</p>
</div>
<div style="width: 33vw;">
<p style="float: right; margin-right: 30px;" class="update-contact-section contact-update">Conatct us: xyz#gmail.com</p>
</div>
</div>
</div>
</body>
</html>
I am making this email template for one of my projects. Here I want that the quote "We are started by students, built by the students ..... " should always appear in the middle(vertically), but I am not able to achieve it. Like if I see my page on a iPad, there is a lot of space between the footer and quote section.
So basically I have to align the content of a div in the middle vertically but for a variable height div. Can anyone please help me with this

Try this :
.md-sec-2{
color: white;
width:80vw;
height: 40vh;
margin:0 auto;
}
.quote-update,.btn{
position: relative;
top:50%;}

how to eliminate the horizontal scrollbar?

I am making a website and one of my biggest problem right now is making it fit on all screens and mobile friendly. One of my biggest problems with that is the horizontal scrollbar! I appreciate anything that can be offered.
here is my code:
<!DOCTYPE html>
<html>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<head>
<link rel="stylesheet" type="text/css" href="about.css">
<title>morgan</title>
<style>
html {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") white no-repeat center top;
background-size: 100%;
background-color: white;
margin: 0;
padding: 0;
overflow-x: none;
}
h2 {
Font-family: Arial;
top: 650px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h3 {
Font-family: Arial;
top: 900px;
left: 500px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h1 {
position: absolute;
top: 21%;
left: 36%;
color: white;
font-family: Arial;
font-size: 4.6vw;
letter-spacing: 1px;
}
p {
position: absolute;
width: 600px;
top: 720px;
left: 310px;
height: 25px;
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
}
a {
color: white;
text-decoration:none;
}
ul li {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
top: 43%;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:link,
ul li:visited {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
font-size: 90%;
width: 150px;
height: 40px;
text-decoration: none;
color: white;
}
li {
text-decoration: none;
color: white;
}
ul li:hover,
ul li:active {
background-color: white;
color: black;
text-decoration: none;
}
ul li a:hover, ul li a:active {
background-color: white;
color: black;
}
ul li a {
display: inline-block;
height: 100%;
width: 100%;
color: white;
text-decoration: none;
}
ul {
margin-right: 10%;
}
.wrapper {
padding-top: 0%;
}
#media screen and (max-width: 300px) {
.wrapper {
padding-top: 40%;
}
ul li{
margin-left: 2px;
margin-top: 5px;
margin-bottom: 0px;
width: 100px;
height:35px;
top: 480%;
}
ul{
margin-top: 165px;
margin-left: 20px;
}
h1{
position:absolute;
top: 120px;
left: 150px;
font-size: 19px;
}
h2 {
font-size: 20px;
width: 200px;
left: 100px;
top: 200px;
}
p {
left: 30px;
top: 390px;
}
hr {
margin-right: 85px;
margin-left: 85px;
margin-top: 375px;
}
}
hr {
margin-right: 150px;
margin-left: 150px;
margin-top: 570px;
}
</style>
</head>
<body>
<center><h1>WHO I AM</h1></center>
<div class="wrapper">
<ul>
<li><a href="www.youtube.com" class="life" ><strong>MY LIFE</strong></a></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
</div>
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, I have a twin brother whose <br>
name is Pierson McNeal White, I have a older brother and sister who are also <br>
twins, I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
<hr>
<h3>Me In A Nutshell</h3>
</body>

Simply use
overflow-x: none;
for the horizontal scrollbar issue.
html {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") #363634 no-repeat center top;
background-size: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-x: none;
}

Messed around with your code, didnt spend all day though. So there is still room for improvement, but fish around in here and pick what you like or build off of it.
body {
background-color: #e3e3e3;
margin: 0 auto;
padding: 0;
font-family: Arial;
}
.header {
background: url(https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png) no-repeat left fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border: 1px solid #000;
text-align: center;
height: 400px;
}
.mobilelinks {display: none;}
.wrapper {
margin: 50px;
}
#footer {
text-align: center;
}
#footer a {
color: #666;
margin-left: 8px;
}
#footer a:hover {
color: #222;
text-decoration: underline;
}
h1 {
color: white;
font-family: Arial;
font-size: 72px;
letter-spacing: 1px;
}
h2 {
color: #525252;
font-size: 36px;
letter-spacing: 1px;
text-align: center;
}
p {
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
text-align: center;
line-height: 150%;
}
a {
color: white;
text-decoration:none;
}
ul li {
text-align: center;
line-height: 40px;
display: inline-block;
letter-spacing: 1px;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:hover {
background-color: white;
}
ul li:hover > a {
color: #000;
}
#media screen and (max-width: 750px) {
.header {height: 300px;}
}
#media screen and (max-width: 500px) {
h1 {
font-size: 52px;
}
.links {display: none;}
.mobilelinks {display: inline-block;}
}
#media screen and (max-width: 400px) {
.header {height: 200px;}
.mobile-terms { display: none;}
h1 {
font-size: 36px;
}
h2 {
font-size: 22px;
}
}
<head>
<title>Morgan the Great</title>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="header">
<h1>Morgan White</h1>
<ul class="links">
<li><strong>MY LIFE</strong></li>
<li><strong>PORTFOLIO</strong></li>
<li><strong>RESUME</strong></li>
<li><strong>ABOUT ME</strong></li>
</ul>
<ul class="mobilelinks">
<li><strong>BUTTON</strong></li>
</ul>
</div>
<div id="mainwrapper">
<div class="wrapper">
<h2>Some Fun Facts</h2>
<p>
I made this website from scratch when I was 14, <br>
I have a twin brother whose name is Pierson McNeal White, <br>
I have a older brother and sister who are also twins, <br>
I used to have 2 pet rats named Hermes and Cleo after the greek gods, <br>
and I watch the super bowl for the ads.
</p>
</div>
<hr>
<div class="wrapper">
<h2>Me In A Nutshell</h2>
<p>
Other Crap Here.
</p>
</div>
</div>
<div id="footer">
Copyright © <script>document.write(new Date().getFullYear())</script> Morgan.
<div>
Link
Privacy Policy
Terms<span class="mobile-terms"> of Service</span>
</div>
</div>
Works on mobile devices.