Having some trouble while learning CSS & HTML - my footer won't stick to the bottom, it seems to float above with space below it (like a margin is present even though it's not). I've tried various online tips but most either don't work or mess up the header when the window is resized (placing it in the middle, etc).
Below is the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Authorized Retailers</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="photos/adidas.png">
<link rel="stylesheet" type="text/css" href="css/stores.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<!-- Header Section -->
<header class="tm-header">
<div class="tm-container">
<a href="index.html"><img class="tm-logo"src="photos/adidas.png" width="80px" height="" alt="logo"></a>
<nav class="tm-nav">
<ul>
<li class="hover_menu"><a href="index.html">Home</a></li>
<li class="hover_menu"><a href="about.html">About Us</a></li>
<li class="current_page"><a href="#">Authorized Retailers</a></li>
<li class="hover_menu"><a href="services.html">Services</a></li>
<li class="hover_menu"><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!-- Content Section -->
<div class="tm-container">
<div class="tm-content">
<section>
<article>
<h1 style="text-align: center; font-size: 50px;">Our Authorized Retailers</h1>
<div>
<span class="stores"><a href="https://www.superge.si/" target="_blank"><img src="photos/superge_logo.png" alt="superge_logo" width="509px" height="200px"></a></span>
<span class="stores"><a href="https://www.hervis.si/store/" target="_blank"><img src="photos/Hervis_logo.png" alt="hervis_logo" width="509px" height="200px"></a></span>
<span class="stores"><a href="http://sl.sportsdirect.com/" target="_blank"><img src="photos/sports-direct-logo.png" alt="sportsdirect_logo" width="500px" height="200px"></a></span>
</div>>
<!-- Additional content goes here -->
</article>
</section>>
</div>
</div>
<!-- Footer Section -->
<div class="tm-footer">
<footer>
© copyright Adidas 2017
</footer>
</div>
</body>
</html>
CSS styles can be found below:
* {
<!-- CSS styles omitted for brevity -->
}
.tm-footer{
text-align: center;
background-color: white;
padding: 10px;
font-weight: 700;
margin-top: 30px;
clear: both;
}
For visual reference, checkout this screenshot: Showing extra space under the footer
Also, this issue is unique and different from any previous duplicate solutions.