Extra whitespace on mobile version of website - html

Question

I've trying to make a website just for a home project but having some trouble with the css for mobile.
There seems to be a lot of whitespace surrounding the elements to the right and bottom of the site. I'm newer to the world of CSS so any help would be appreciated.
Screenshot of what chrome shows in developer mode.
#media screen and (max-width:450px) {
body {
margin: 0 0 0 0;
padding: 0 0 0 0;
max-width: 100vw;
overflow-x: hidden;
}
html{scroll-behavior:smooth}
.navbar {
background-color: #008B8B;
position: fixed;
top: 0;
z-index: 100;
width: 100vw;
}
.navbar a {
text-decoration: none;
display: inline-block;
float: center;
padding-bottom: 20px;
}
.logo{
display: none;
}
.loginLogo{
width = 1px;
height = 1px;
visibility: hidden;
}
.navbar-name{
color: #f2f2f2;
font-size:25px;
padding-left: 25%;
font-family: 'Lobster', cursive;
}
.navbar-home{
font-size: 17px;
padding-top: 5px;
padding-right: 10px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-products{
font-size: 17px;
padding-top: 5px;
padding-right: 10px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-about{
font-size: 17px;
padding-top: 5px;
padding-right: 10px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-contact{
font-size: 17px;
padding-top: 5px;
padding-right: 17.5%;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
}
.navbar-login{
font-size: 1px;
padding-top: 1px;
float: right;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
visibility: hidden;
}
/* Change the color of links on hover */
.navbar-home:hover {
color: black;
}
.navbar-products:hover {
color: black;
}
.navbar-about:hover {
color: black;
}
.navbar-contact:hover {
color: black;
}
.navbar-login:hover {
color: black;
}
/* Add a color to the active/current link */
.navbar a.active {
background-color: #4CAF50;
color: white;
}
/*--------HOME PAGE------------*/
.homePage{
margin: 0 0 0 0;
padding: 0;
width: 100vw;
height: 820px;
background-image: url(multiGrain.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.homePageH1{
position: absolute;
text-align: center;
overflow: hidden;
white-space: nowrap;
top: 26%;
left:50%;
transform: translateX(-50%) translateY(-50%);
font-size: 40px;
color: white;
}
.homePageH2{
position: absolute;
text-align: center;
display: inline;
top: 28%;
left: 50%;
text-align: center;
transform: translateX(-50%) translateY(-50%);
font-size: 20px;
color: white;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
display: inline-block;
}
.aboutUsButton{
position: absolute ;
text-align: center;
top: 31%;
left:30%;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
transform: translateX(-50%) translateY(-50%);
background-color: rgb(0, 159, 159);
border-radius: 25px;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
text-decoration: none;
}
.ourProductsButton{
position: absolute ;
text-align: center;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
display: inline-block;
top: 31%;
left:70%;
padding: 10px;
padding-right: 18px;
padding-left: 18px;
transform: translateX(-50%) translateY(-50%);
background-color: rgb(0, 159, 159);
border-radius: 25px;
font-family: 'Titillium Web', sans-serif;
color: #f2f2f2;
text-decoration: none;
}
/*-------ABOUT US PAGE----------*/
.aboutUsPage{
margin: 0 0 0 0;
padding: 0px;
background-color: white;
height: auto;
width: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.aboutUsH1{
position: relative;
padding-top: 20px;
padding-left: 20px;
margin: 0px;
text-align: left;
display: block;
width: 90%;
top: 20%;
font-size: 20px;
font-family: 'Lobster', cursive;
color: black;
background-color: rgb(255,255,255);
}
.aboutUsP{
position: relative;
padding-top: 20px;
padding-left: 20px;
padding-bottom: 30px;
margin: 0px;
text-align: left;
float: bottom;
display: block;
width: 90%;
top: 5%;
font-size: 15px;
font-family: 'Lobster', cursive;
color: black;
background-color: rgb(255,255,255);
}
.mixerImage{
position: relative;
object-fit: cover;
width: 100%;
height: 150px;
}
/*--------PRODUCTS PAGE------------*/
.productsPage{
position: relative;
margin: 0px;
padding: 0px;
background-color: white;
height: 300px;
width: auto;
}
.productsH1{
position: relative;
text-align: left;
top: 5%;
left: 4%;
font-size: 25px;
font-family: 'Titillium Web', sans-serif;
color: black;
}
.productsP{
position: relative;
padding: 10px;
padding-top: 15px;
text-align: left;
float: inherit;
width: 45%;
left: 2%;
font-size: 15px;
font-family: 'Titillium Web', sans-serif;
color: black;
background-color: white;
}
.productListButton{
position: absolute ;
text-align: center;
left: 2%;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
background-color: black;
border-radius: 25px;
font-family: 'Titillium Web', sans-serif;
letter-spacing: 5px;
color: white;
text-decoration: none;
}
.slideshowImage1{
position: absolute;
width: auto;
left: 55%;
top: 15%;
height: 100px;
float: right;
margin: 10px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.slideshowImage2{
width = 0px;
height = 0px;
visibility: hidden;
}
/*-------CONTACT US PAGE---------*/
.contactPage{
margin: 0 0 0 0;
padding: 0px;
background-image: url(rollingPin2.JPG);
height: 700px;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-size: 200% 100%;
}
.contactH1{
position: relative;
text-align: center;
overflow: hidden;
white-space: nowrap;
top: 10%;
left:0%;
font-size: 70px;
letter-spacing: 3px;
color: white;
font-family: 'Dancing Script', cursive;
}
.contactP1{
position: relative;
text-align: center;
top: 10%;
left:0%;
font-size: 18px;
color: white;
font-family: 'Slabo 27px', serif;
}
.contactP2{
position: relative;
text-align: center;
top: 10%;
left:0%;
font-size: 18px;
color: white;
font-family: 'Slabo 27px', serif;
}
.contact-form{
position: relative;
top: 15%;
width: 80%;
left: 47.5%;
transform: translateX(-50%);
}
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
font-family: 'Titillium Web', sans-serif;
border-radius: 4px; /* Rounded borders */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: none; /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
width: 105%;
background-color: #008B8B;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: black;
}
.nameInput{
position: relative;
top: 0px;
color: white;
}
.emailInput{
position: relative;
top: 5px;
color: white;
}
.messageInput{
position: relative;
top: 5px;
color: white;
}
.submitButton{
position: relative;
top: 5px;
}
/*--------FOOTER---------*/
.facebookLogo{
width: 0%;
height: 0%;
visibility: hidden;
}
.footer {
width: 0px;
height: 0px;
visibility: hidden;
}
.footerp1{
width: 0px;
height: 0px;
visibility: hidden;
}
.footerp2{
width: 0px;
height: 0px;
visibility: hidden;
}
.footerp3{
width: 0px;
height: 0px;
visibility: hidden;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Slabo+27px&display=swap" rel="stylesheet">
<title>Doughboys Bakery</title>
<link href="StyleSheet.css" rel="stylesheet">
</head>
<body>
<header class="site-header">
<nav class="navbar">
<img class = "logo" src="Doughboys Logo - Website Version.png" alt="Logo" width="80"height="45.109">
<a class="navbar-name" href="">Doughboy's Bakery.</a>
<a class="navbar-login" href="">Log In</a>
<img class = "loginLogo" src="loginLogo2.png" onmouseover="this.src='loginLogo2Black.png';" onmouseout="this.src='loginLogo2.png';" width="50"height="28.889"/>
<a class="navbar-contact" href="#contactPage">Contact</a>
<a class="navbar-products" href="#productsPage">Products</a>
<a class="navbar-about" href="#aboutUsPage">About</a>
<a class="navbar-home" href="#homePage">Home</a>
</nav>
</header>
<div class = "homePage" id="homePage">
<h1 class="homePageH1">Quality or Quantity</h1>
<h2 class="homePageH2">We're here to give you both</h2>
<div class = "homePageButtons">
<a class="aboutUsButton" href="#aboutUsPage">About Us</a>
<a class="ourProductsButton" href="#productsPage">Our Products</a>
</div>
</div>
<div class = "aboutUsPage" id="aboutUsPage">
<div class = "aboutUsText">
<h1 class="aboutUsH1">Who we are.</h1>
<p class="aboutUsP">Doughboys Bakery is a locally owned and operated wholesale bakery located near the city centre of Palmerston North. We produce traditional bakery goods like the classic Mince and Cheese Pies and Custard Squares. <br/><br/>We deliver actively in the Manawatu-Whanganui, Horowhenua & Wairarapa regions. (T's & C's Apply)<br/><br/>Use the contact section below to see how we can help suit your baking needs.</p>
</div>
</div>
<div class = "productsPage" id="productsPage">
<h1 class="productsH1">What we make.</h1>
<p class="productsP">At Doughboys' we supply traditionally sold bakery goods all the way from the classic Mince and Cheese Pie to the humble Scone.</p>
<button class="productListButton" type="submit" onclick="window.open('ProductList.doc')">Full Product List</button>
<div id="slideshow">
<div>
<img class="slideshowImage1" src="fruitPies.jpeg">
</div>
<div>
<img class="slideshowImage2" src="pies.jpg">
</div>
</div>
</div>
<div class="contactPage" id="contactPage">
<h1 class="contactH1">Contact Us.</h1>
<p class="contactP1">ADDRESS: 15 Johnston St </p>
<p class="contactP2">TEL: [phone] | doughboys#gmail.net.nz</p>
<div class = "contact-form">
<form id = "contact-form" method="post" action="contactForm.php">
<input class= "nameInput" type="text" id="name" name="name" placeholder="Your name...">
<input class= "emailInput" type="text" id="email" name="email" placeholder="Your email...">
<textarea class= "messageInput" id="message" name="message" placeholder="Write something..." style="height:100px"></textarea>
<input class= "submitButton" type="submit" value="Submit">
</form>
</div>
</div>
<div class="footer">
<a href="https://www.facebook.com/Doughboys-Bakery-Ltd-216199385212667">
<img class = "facebookLogo" src="facebookLogo.png" >
</a>
<p class="footerp1">[phone]</p>
<p class="footerp2">doughboys#gmail.net.nz</p>
<p class="footerp3">15 Johnston St</p>
</div>
</body>
</html>