Space at the top of the page (Twitter Bootstrap 3)

I have a space at the page's top and I don't know how to remove it.

I have created background image (1,2) in my page example. But I'm not able to find what the source of this white line. I have modified a lot of settings in css with no result.

Demo in Bootply

Here's my code:

<!-- language: lang-html -->

<section id="first">
    <h1>TEST!</h1> <br>
</section>
<section id="first1">
    <h1>TEST2!</h1> <br>
</section>

<!-- language: lang-css -->

#first {
    background: url(http://placehold.it/1350x890/37FDFC/&text=photo1) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 800px;
    /*height: 800px;*/
    /*padding-bottom: 200px;*/
}

#first1 {
    background: url(http://placehold.it/1350x890/FFFF00/&text=photo2) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 800px;
    /*height: 800px;*/
    /*padding-bottom: 200px;*/
}

Just to highlight what Christina said, this issue is being caused by the top-margin on your h1 element:

Here's a cleaned up version that replicates the problem

<!-- begin snippet: js hide: true --> <!-- language: lang-css -->

.background-photo {
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  min-height: 800px;  
}

#first {
  background-image: url(http://placehold.it/1350x890/37FDFC/&text=photo1);
}
#second {
  background-image: url(http://placehold.it/1350x890/FFFF00/&text=photo2);
}

<!-- language: lang-html -->

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

<section id="first" class="background-photo">
  <h1>TEST!</h1>
</section>
<section id="second" class="background-photo">
  <h1>TEST2!</h1>
</section>

<!-- end snippet -->

You can fix it by doing either of the following:

1) Adding sufficient padding to the containing section:

<!-- language: lang-css -->

.background-photo {
  padding-top: 20px;
}

<!-- begin snippet: js hide: true --> <!-- language: lang-css -->

.background-photo {
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  min-height: 800px;  
}

#first {
  background-image: url(http://placehold.it/1350x890/37FDFC/&text=photo1);
}
#second {
  background-image: url(http://placehold.it/1350x890/FFFF00/&text=photo2);
}

.background-photo {
  padding-top: 20px;
}

<!-- language: lang-html -->

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

<section id="first" class="background-photo">
  <h1>TEST!</h1>
</section>
<section id="second" class="background-photo">
  <h1>TEST2!</h1>
</section>

<!-- end snippet -->

2) Removing the Margin on the header:

<!-- language: lang-css -->

.background-photo h1 {
  margin-top: 0px;
}

<!-- begin snippet: js hide: true --> <!-- language: lang-css -->

.background-photo {
  background: no-repeat center center fixed;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  min-height: 800px;  
}

#first {
  background-image: url(http://placehold.it/1350x890/37FDFC/&text=photo1);
}
#second {
  background-image: url(http://placehold.it/1350x890/FFFF00/&text=photo2);
}

.background-photo h1 {
  margin-top: 0px;
}

<!-- language: lang-html -->

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>

<section id="first" class="background-photo">
  <h1>TEST!</h1>
</section>
<section id="second" class="background-photo">
  <h1>TEST2!</h1>
</section>

<!-- end snippet -->