I have encountered a problem where the footer is displaying on top of my page, despite not using any floats, wrappers, or grids in my code. The code snippet can be found below this text. Could someone assist me in identifying why this issue is occurring and provide guidance on how to prevent it from happening again? Thank you for your help!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
margin:0px;
}
main {
margin: 1cm auto;
width: 50%;
padding: 1cm;
border: 1px solid black;
}
nav {
border: 1px solid black;
}
</style>
</head>
<body>
<footer> Service Networking </footer>
<nav>
<label>Name: <input type="text" name="name"> </label>
<label>Surname: <input type="text" name="surname"> </label>
</nav>
<main>
<h1> Welcome! </h1>
<p> This is your first page </p>
</main>
</body>
</html>