After creating a header and footer using Bootstrap and styling them with CSS, I've noticed some white space above the header and below the footer. Unfortunately, I'm unsure of what is causing this unwanted space to appear.
Below is the code snippet for reference:
header.php
<html dir="ltr" lang="en">
<head>
<title></title>
<link rel="stylesheet" href="css/main.css" media="all">
<link href="css/main.css" rel="stylesheet">
<meta charset='utf-8' />
<link href='fullcalendar.min.css' rel='stylesheet' />
<link href='fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='lib/moment.min.js'></script>
<script src='lib/jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
</head>
<nav class="navbar navbar-expand-lg navbar-static-top" id="topNav">
<img src="images/logo.png" alt="Logo">
</nav>
footer.php
<footer class="footer">
<div class="container">
<p class="m-20 text-center text-white"><br></p>
</div>
</footer>
main.css
body {
margin-top: 60px;
margin-bottom: 100px;
}
.footer {
position: sticky;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #CC0033;
}
#topNav {
position: sticky;
width: 100%;
height: 70px;
line-height: 60px;
background-color: #CC0033;
}