I have searched extensively, but none of the solutions I've found address my specific issue.
There is a persistent 14px gap between vertical DIV elements on my page. Even when inspecting the code, there seems to be no margin or padding causing this gap. It transitions from one div (with no bottom margin or padding) to the next (with no top margin or padding).
The only workaround I've discovered so far is setting the margin of the lower DIV to -14px, which doesn't feel like the right solution.
In addition, my FOOTER seems to be floating in the middle of the screen!
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title</title>
</head>
<body>
<header>
<!-- navigation -->
</header>
<main>
<div class="banner">
<div>
<h3>Some text</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis, eius.
</p>
</div>
</div>
<div class="services-section">
<p>
These are services
</p>
</div>
<div class="contact-section">
<p>
This is content
</p>
</div>
</main>
<footer>
<ul>
<li>something
<li>something else
</ul>
</footer>
</body>
</html>
CSS:
html,body,main
{
height: 100%;
}
footer
{
background-color: #000;
color: white;
min-height: 120px;
width: 100%;
}
.banner
{
background: url('/img/laptop.jpg') no-repeat center fixed;
background-size: cover;
color: white;
height: 100%;
text-align: center;
}
.banner div
{
/* padding-top: 200px;*/
position: absolute;
top: 40%;
width: 100%;
}
.banner div h3
{
font-size: 36px;
text-shadow: 0em 0.1em 0.1em rgba(0, 0, 0, 0.9);
}
.banner div p
{
font-size: 18px;
}
.services-section
{
background-color: #eee;
min-height: 520px;
margin: 0;
padding: 0;
}
.contact-section
{
background-color: #1C74BB;
min-height: 400px;
margin: 0;
padding: 0;
}
Fiddle link: https://jsfiddle.net/1vLzvb0k/9/
Thank you!