How do I get rid of whitespace between sections CSS/HTML - html

Question

I'm new to web design and ran into this problem; I have two sections, each section with its won background image. However, the first background image doesn't end right after the previous background image. Instead, there's a whitespace between the two images that looks hideous.
This is the jsfiddle: http://jsfiddle.net/M26Ge/
CSS:
#slide-1 .bcg {
background-image:url('http://upload.wikimedia.org/wikipedia/commons/1/15/Hopwas_Woods_Sun.jpg');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 800px;
width: 100%;
}
#slide-2 .bcg{
background-image:url('http://i953.photobucket.com/albums/ae11/Kronstadt/Shabby-Princess-Kristie_SF_StripedP.jpg');
background-position: center center;
background-repeat: repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;
}

Answer 1

I am not sure, but maybe are you looking for CSS Reset?
Just write * { margin: 0; padding: 0; } at top of css code. Else, if you are having other whitespace issues with inline elements, you can fix them using font-size: 0; on the container of the affected elements.

Answer 2

You can as well hold the margin of hx and p elements within the section by
setting a border to the first child div . Borders
section>div {
border:1px solid transparent
}
or padding will do:
section div {
padding:1px;
}
To understand what is going on , you can read this article.

Answer 3

Add this to your CSS:
*{
padding: 0;
margin: 0;
}
This sets the margin and padding of all elements equal to zero.

Answer 4

Using Sublime Text you have to place your elements right beside the other one.
<section>
<div></div>
</section>
<section>
<div></div>
</section>
should become :
<section>
<div></div>
</section><section>
<div></div>
</section>