Make section fill entire screen - html

Question

Hi i'm trying to create a hero section that has a 100% width and height. I know there are many questions on this topic but none of them seems to be working for me. What I want to achieve is a section with an image and some text that is the first thing the user sees. When the user scrolls the rest of the website is shown.
When i run my code I get white bars around the image and i've tried to set margin to 0px nut i does not work.
Sorry for bad English.
This is some of my code:
HTML:
<section id="hero-section">
<h4>Welcome to</h4>
<h1>ALEX WEIT</h1>
</section>
</body>
CSS:
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%;
}
Screenshot:
http://postimg.org/image/qsutt7d6n/

Answer 1

I tested here in my jsfiddle and worked correctly:
the HTML is the same:
<section id="hero-section">
<h4>Welcome to</h4>
<h1>ALEX WEIT</h1>
</section>
I changed the CSS, the background-image to background-color to test and add a "*" selector:
* {
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%;
}
See the sample here: http://jsfiddle.net/yv3vkqfw/