css - 无法让照片响应

Question

所以，我试图让这张响应式照片成为容器的宽度(它是)和浏览器/视口(viewport)的高度(它不是)。但我似乎永远无法正确设置 css。我附上了一张照片，以帮助大家看到这个问题。也可以在 Zoeaa.com 上查看

根据下面的代码，我需要做什么才能实现这一目标？

.containerz section {
color: #000000;
padding: 30px 0;  
width: 100%;
height: auto;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("https://zoeaa.com/public/admin/social-network- 
lol.jpg");
background-size: cover;
}
.dividerz {
padding:0;
margin:0;
}
.dividerz h1 {
margin: 10%;
text-align:center;
font-size:48px;
color: #fff;
}

html{
padding: 1rem;
} 

}
p{
color: #fff;
line-height: 1.5;
font-size: 20px;
}
@media only screen and (max-width: 700px){
.dividerz h1{
font-size: 20px;
}
p{
font-size: 14px;
}
}

.btn {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
link: color: red;
border-radius: 5px;
text-align: center;
}

a:link {
color: white;
}

.btn:hover {
background-color: black;
}
</style>

<div class="containerz">
<section class="wrapperz">
    <div class="dividerz">
        <div class="bg"></div>
        <h1>We help you connect with new people!</h1>
        <a href="about.zoeea.com" class="btn" role="button">What is Zoeaa? 
 </a>
    </div>
 </section>
 </div>

Answer 1

你好，你能检查这段代码吗，我已经编辑过，它对我来说工作正常，这是我的截图:http://prntscr.com/l5465t

CSS

<style>
.containerz section {
color: #000000;
padding: 30px 0;  
width: 100%;
height: auto;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url("https://zoeaa.com/public/admin/social-network-lol.jpg");
background-size: cover;
}
.dividerz {
padding:0;
margin:0;
}
.dividerz h1 {
margin: 10%;
text-align:center;
font-size:48px;
color: #fff;
}

body{padding: 0;margin: 0;}
html{
padding:0;
} 

}
p{
color: #fff;
line-height: 1.5;
font-size: 20px;
}
@media only screen and (max-width: 700px){
.dividerz h1{
font-size: 20px;
}
p{
font-size: 14px;
}
}

.btn {
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
link: color: red;
border-radius: 5px;
text-align: center;
}

a:link {
color: white;
}

.btn:hover {
background-color: black;
}
</style>