I'm having trouble formatting the footer to appear at the bottom of the page. I've tried adjusting the CSS code for the .container and .footer classes, but nothing seems to work. As a newbie in website development, any helpful tips or suggestions would be appreciated. Here's the HTML and CSS code I'm working with:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/main.css">
<title> ~ Portfolio</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
</head>
<body>
<header>
<div class="container">
<img src="">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Experience</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<footer class="footer">
<font color="white" face="Roboto">Johnny Handcock</font>
</footer>
</header>
</body>
</html>
nav {
word-spacing: 15px;
float: right;
padding-right: 20px;
/* normal, hidden state */
}
a {
text-decoration:none;
color: #ffff;
font-size: 20px;
font-family: 'Roboto', sans-serif;
font-weight: 600;
}
a:hover {
/* when parent is hovered */
color:black;
opacity: 0.6;
outline-style: solid;
outline-color: radial-gradient(circle, rgba(128,0,255,1) 0%, rgba(128,0,255,0.9612045501794468) 67%, rgba(102,34,193,1) 84%);
border-radius: 10px;
}
ul > li {
display: inline-block;
/* You can also add some margins here to make it look prettier */
zoom:1;
*display:inline;
/* this fix is needed for IE7- */
}
body {
/* Previous Config background: rgb(48,6,102);
background: linear-gradient(117deg, rgba(48,6,102,1) 0%, rgba(110,5,162,0.9612045501794468) 56%, rgba(109,32,210,1) 77%);*/
background: rgb(128,0,255);
background: radial-gradient(circle, rgba(128,0,255,1) 0%, rgba(128,0,255,0.9612045501794468) 67%, rgba(102,34,193,1) 84%);
/* Top, Right, Bottom, Left
margin: 400px 300px 200px 800px */
}
.footer {
background-color: #111111;
color: #eeeeee;
border-top: 1px solid red;
height: 60px; /* footer height */
padding-top: 20px;
display: block;
margin-top: 20px; /* space between content and footer */
box-sizing: border-box;
position: relative;
width: 100%;
}