I am creating a web page with html and css, however when I created the footer CSS it sits in the middle of the page. I've tried w3 schools but I couldn't find anything on it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="The Dusty Garage">
<title> The Dusty Garage </title>
CSS STARTS HERE html, body { margin: 0;
font-family: Arial, Helvetica, sans-serif, Verdana, Geneva, Tahoma, sans-serif;
}
#wrapper {
margin: auto;
width: 100%;
max-width: 100%;
}
#navigationbar {
clear: both;
height: 50px;
max-width: 100%;
background-color: cornflowerblue;
}
#companyname {
margin: 0;
float: left;
padding: 5px;
font-size: 12px;
text-decoration: none;
}
#companyname a {
color: black;
text-decoration: none;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding-left: 0;
}
nav ul li {
color: #fff;
display: block;
float: left;
padding: 1rem;
border-right: 1px solid #bbb;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
nav ul li a {
display: block;
text-decoration: none;
color: white;
}
nav ul li:hover,
nav ul li:focus-within {
background-color: royalblue;
cursor: pointer;
}
nav ul li:focus-within a {
outline: none;
}
nav ul li ul {
background-color: cornflowerblue;
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
white-space: nowrap;
}
nav ul li:hover>ul,
nav ul li:focus-within>ul,
nav ul li ul:hover,
nav ul li ul:focus {
visibility: visible;
opacity: 1;
display: block;
}
nav ul li ul li {
background-color: cornflowerblue;
width: 100%;
display: inline-block;
}
nav li:last-child {
border-right: none;
}
nav .active {
background-color: black;
}
/* Navigation CSS End */
/* Banner Image CSS Start */
.hero {
height: 70vh;
display: block;
justify-content: center;
align-items: center;
text-align: center;
color: white;
background-image: url(https://memberpress.com/wp-content/uploads/2015/06/Google-tools@2x-1.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.hero>* {
color: black;
}
.hero>h2 {
font-size: 3rm;
padding-bottom: 20rem;
text-align: center;
vertical-align: middle;
}
/* HERO IMAGE BANNER END */
/* START SECTION CSS FOR BROWSE AND SELL */
.browsesellarea {
display: flex;
flex-wrap: wrap;
}
/* Heading Style */
.browsesellarea-heading {
position: absolute;
margin-top: 0;
}
.browsesellarea-area {
flex: 1 0 500px;
box-sizing: border-box;
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
margin: 3rem .5rem .5rem .5rem;
padding: .1rem .1rem .1rem .1rem
}
.browsesellarea-area img {
display: block;
border: black;
width: auto;
height: 290px;
padding: .1rem .1rem .1rem .1rem
}
/* END BROWSE-SELL CSS */
/* START FOOTER CSS */
.footer {
display: flex;
align-items: center;
justify-content: center;
background-color: cornflowerblue;
color: white;
margin: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<!---Contains Navigation and Logo-->
<header>
<div id="navigationbar">
<div id=companyname>
<a href="#">
<h1>The Dusty Garage</h1>
</a>
</div>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#BrowseTools">Browse Tools</a>
<ul>
<li>
<a href="#BrowseTools">Browse Tools</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<section class="hero">
<h2>Find the Perfect Tool</h2>
</section>
<main>
<!---Contains Main Content-->
<div class="goal-heading">
<h1>Our Aim</h1>
</div>
<p> The Aim of this project is to develop a peer to peer marketplace for used and new tools. Many people own
tools
they don’t use anymore, so instead of gathering dust in the garage, this marketplace aims to give old
tools
a
new lease on life. From garden to industrial tools, users can list tools they own for sale and make bids
on
other user’s listed tools. Users can see a list of bidders and contact the user who has made the most
appealing
bid, for transaction outside the website. Once a sale has been made, all the seller needs to do is mark
the
item
as sold .</p>
<section class="browsesellarea">
<section class="browsesellarea-heading">
<h2>Looking for Tools?</h2>
<div class="browsesellarea-area">
<img src="Images/2925.jpg" alt="Browse Tools to Buy" />
</div>
<button>Browse Categories</button>
<h2> Got a shed full of dusty tools?</h2>
<div class="browsesellarea-area">
<img src="Images/10975.jpg" alt="Browse Tools to Buy" />
</div>
<button>Sell Your Tools Here</button>
</section>
</section>
</main>
</div>
<!-- FOOTER -->
<footer class="footer">
<div>
<p>Copyright © 2019</p>
</div>
</footer>
</body>
</html>
Footer should sit on the bottom of the page. However, it sits in the middle. I'd like it to sit on the bottom of the page as a footer should do. Would anyone know how to fix this issue?
