How do I get rid of whitespace between sections CSS/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

1. setting a border to the first child div . Borders

   section>div { border:1px solid transparent }

2. or padding will do:

   section div { padding:1px; }

To understand what is going on , you can read this article.