I am making a website for my friend, and I am currently having two problems that I can't seem to solve:
I can't seem to get rid of the white space that exists between the main container and the footer. There is a small strip of white that runs from the bottom of the background image to the footer.
When the browser window is shrunk (especially to half the width of the screen) white space appears after the footer.
Can anyone help me please? Thanks!
body {
margin: 0px;
font-size: 62.5%;
padding: 0px;
}
header {
width: 100%;
height: 90px;
background-color: #000000;
}
#logo_home {
position: relative;
float: left;
left: 5%;
width: 20%;
top: 7.5px;
}
#logo {
height: 75px;
width: 300px;
}
nav {
position: relative;
float: right;
right: 5%;
width: 35%;
height: 50px;
top: 20px;
}
ul {
margin-top: 0px;
margin-bottom: 0px;
position: relative;
top: 6.5px;
}
li {
display: inline-block;
margin-left: 2.5%;
margin-right: 2.5%;
position: relative;
list-style-type: none;
padding-top: 0px;
}
.nav_link {
font-family: 'PT-Sans', sans-serif;
color: #FFFFFF;
font-size: 1.2em;
text-transform: uppercase;
line-height: 37px !important;
text-decoration: none;
}
.nav_link:link {
color: #ffffff;
}
.nav_link:visited {
color: #ffffff;
}
.nav_link:hover {
color: #dddddd;
}
#video_container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
#video_container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 100px;
left: 17.5%;
width: 65%;
height: 65%;
}
#main_container {
background-image: url("../images/background.jpg");
background-size: cover;
margin: 0px;
}
footer {
background-color: #000000;
height: 50px;
width: 100%;
margin: 0px;
}
.copyright {
color: white;
font-family: 'PT-Sans', sans-serif;
font-size: 1.2em;
position: relative;
text-align: center;
top: 15px;
}<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex, nofollow, noarchive" />
<link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
<title>Hyperdog Productions</title>
</head>
<body>
<header>
<div id="logo_home">
<a href="index.html" title="Home">
<img id="logo" src="images/logo.jpg" alt="logo">
</a>
</div>
<nav>
<ul>
<li><a class="nav_link" id="about" href="about.html" title="About">About</a>
</li>
<li><a class="nav_link" id="short_films" href="short_films.html" title="Short Films">Short Films</a>
</li>
<li><a class="nav_link" id="cast_crew" href="cast_crew.html" title="Cast/Crew">Cast/Crew</a>
</li>
<li><a class="nav_link" id="gallery" href="gallery.html" title="Gallery">Gallery</a>
</li>
<li><a class="nav_link" id="links" href="links.html" title="Links">Links</a>
</li>
<li><a class="nav_link" id="contact_us" href="contact_us.html" title="Contact Us">Contact Us</a>
</li>
</ul>
</nav>
</header>
<div id="main_container">
<div id="video_container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/EuIXJIp8f6U" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<footer>
<p class="copyright">Copyright © 2016. All Rights Reserved.</p>
</footer>
</body>
</html>
