無法擺脫的容器和頁腳

我想提出一個網站，我的朋友之間的空白，而且我目前有兩個問題，我似乎無法來解決：無法擺脫的容器和頁腳

我可以」似乎擺脫了主容器和頁腳之間存在的空白區域。有一小塊白色從背景圖像的底部延伸到頁腳。
當瀏覽器窗口縮小時（特別是屏幕寬度的一半），頁腳後會出現空白。

任何人都可以幫助我嗎？謝謝！

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 &copy; 2016. All Rights Reserved.</p> 
 
    </footer> 
 
</body> 
 

 
</html>

來源

2016-01-13 Drew

可能的指導：[Mysterious Whitespace Underneath Image]（http://stackoverflow.com/a/31445364/3597276） –

這也許是默認的頂部和底部邊緣上的頁腳<p>，重置和看到的。

.copyright { 
    margin: 0; 
}

來源

2016-01-13 01:11:03 Stickers

無法擺脫的容器和頁腳

回答

相關問題