Html 使部分填充整个屏幕

嗨，我正在尝试创建一个100%宽度和高度的英雄部分。我知道在这个话题上有很多问题，但似乎没有一个适合我。我想要实现的是一个带有图像和一些文本的部分，这是用户看到的第一件事。当用户滚动时，将显示网站的其余部分。 当我运行代码时，图像周围会出现白色的条带，我试图将边距设置为0px，但我不工作。 对不起，英语不好。 这是我的一些代码：

HTML:

截图：

---

我在我的JSFIDLE中进行了测试，并且工作正常：

HTML是相同的：

<section id="hero-section">

<h4>Welcome to</h4>
<h1>ALEX WEIT</h1>
<a href="#name-section" class="button"></a>

</section>

---

请参见此处的示例：

是否设置了边距：0；到正文和html？

body, html{
height: 100%;
}

#hero-section{
background-image: url(../Images/Lake.jpg);
background-size: cover;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}

<section id="hero-section">

<h4>Welcome to</h4>
<h1>ALEX WEIT</h1>
<a href="#name-section" class="button"></a>

</section>

* {
    margin:0;
}
body, html {
    height:100%;
}
#hero-section {
    background-color: red;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}