body, html {
font-family: 'Asap', sans-serif;
text-align: center;
padding: 0px;
margin: 0px;
}
body {
background-image: url("../Images/firepit2.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
a {
text-decoration: none;
color: #000;
}
a:link {
text-decoration: none;
color: #000;
}
a:visited {
}
a:hover {
font-weight: bold;
}
a:active {
}
#Logo {
font-size: 3em;
font-style: italic;
background-color: #064501; /* Dark Woodrow Green */
padding: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
#Navigation {
list-style: none;
margin-top: 0px;
background-color: rgba(255, 255, 255, .65);
padding: 10px;
}
#Navigation li {
display: inline;
padding-left: 5px;
padding-right: 5px;
}
#Navigation li a {
text-decoration: none;
color: #000;
}
#Wrapper {
width: 50%;
margin: 0px auto;
margin-top: 90px;
background-color: rgba(255, 255, 255, .65);
padding-top: 10px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 30px;
border-radius: 40px;
}
#Greeting {
border-bottom: 1px solid;
padding-bottom: 20px;
}
#Wrapper p {
line-height: 1.1em;
margin-top: 26px;
text-align: center;
}
footer {
background-color: #064501; /* Dark Woodrow Green */
margin-top: 90px;
font-style: italic;
}
footer p {
float: left;
}
footer ul {
float: right;
}
footer ul li {
display: inline;
}
footer::after {
display: block;
content: '';
clear: both;
}
#Copyright {
margin-left: 25px;
padding-top: 10px;
padding-bottom: 10px;
}
#Contact {
margin-right: 25px;
padding-top: 10px;
padding-bottom: 10px;
}
#Contact li {
padding-left: 3px;
padding-right: 3px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Woodrow Lawn and Turf</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="../CSS/index.css">
<link href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,500i,700,700i" rel="stylesheet">
</head>
<!-- DEVELOPER NOTES -->
<!--
- Keywords and description meta are still subject to change by the client.
- Make sure to add correct target attributes and file paths to the nav links.
- All images used in this mockup are subject to copyright currently.
- Make sure to add alternate font families to the font-family style. (2 only)
- Fix non-colored area below the footer.
-->
<body>
<header>
<h1 id="Logo">Woodrow Lawn and Turf</h1>
<nav>
<ul id="Navigation">
<li><a href="index.html">About Us</a></li>
<li>|</li>
<li><a href="#">Lawn Stuff</a></li>
<li>|</li>
<li><a href="#">Dirt Stuff</a></li>
<li>|</li>
<li><a href="#">Flower Bed Stuff</a></li>
<li>|</li>
<li><a href="#">Patio Stuff</a></li>
<li>|</li>
<li><a href="#">Firepit Stuff</a></li>
<li>|</li>
<li><a href="#">Commercial and Business Stuff</a></li>
</ul>
</nav>
</header>
<div id="Wrapper">
<h1 id="Greeting">Welcome!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore... This particular query has been addressed countless times, however, despite attempting several common solutions, I have yet to see any positive outcomes. There is a slight gap between the footer and the bottom of the page that reveals the background, and the cause of this issue remains unknown to me. UPDATE: Strangely, it appears that the space has vanished or somehow resolved itself. Perhaps just a quirk of the browsers.