How to get rid of body background color between div background images

Question

There are white slivers between the div background images.

Screen shot:

Code:

body {
  color: white;
  font-family: monospace;
  font-size: 20px;
  text-align: center;
}
h1 {
  font-size: 100px;
  margin-left: auto;
  text-align: center;
}
.social-media img {
  height: 100px;
  width: 100px;
  border-radius: 40px;
}
#profile-pic {
  height: 250px;
  width: 250px;
  border-style: hidden;
  border-radius: 25px;
}
.albums img {
  height: 150px;
  width: 150px;
}
#intro {
  background-image: url(https://www.clipartsgram.com/image/533949003-dark-abstract-1920x1080-wallpaper-2.jpg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  background-position:center-top;
  background-position-x: 50%;
  background-position-y: 0%;
}
#portfolio {
  background-image: url(http://www.marcysalisbury.com/wp-content/uploads/2011/09/background-dark1.jpg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  background-position:center-top;
  background-position-x: 50%;
  background-position-y: 0%;
}
#entertainement {
}
.navbar .navbar-nav {
  display: inline-block;
  float: none;
}
.navbar .navbar-collapse {
  text-align: center;
}
hr {
  opacity: 0.5;
}

<div class="container-fluid">
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#entertainement">Entertainement</a></li> 
      <li><a href="#contact">Contact Me</a></li> 
    </ul>
  </div>
</nav>
<div id="intro">
  <h1 class="text-center">My website</h1>
  <p>Bio:<br />bio line 1<br />bio line 2</p><br /><br /><br /><br />
  <img id="profile-pic" src="#" alt="profile pic">
  <p><br /><br />follow me on social media</p>
  <div class="social-media">
    <a href="#" target="_blank"><img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" alt="github"></a>
    <a href="#" target="_blank"><img src="http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram_App_Large_May2016_200.png" alt="my instagram"></a>
    <a href="#" target="_blank"><img src="https://oldschoolgameblog.files.wordpress.com/2016/06/steam-logo.png" alt="my steam"></a>
    <a href="#" target="_blank"><img src="https://avatars2.githubusercontent.com/u/9892522?v=3&s=400" alt="my yt"></a>
    <a href="#" target="_blank"><img src="https://pbs.twimg.com/profile_images/730090233849516032/dLWYa115.jpg" alt="my backloggery"></a>
  </div><br /> <hr />
</div>
<div id="portfolio">
  <h2>My portfolio of nothing:</h2>
  <div class="albums">
    <a href="#" target="_blank"><img src="#" alt=""></a><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
</div>

Answer 1

web browsers usually add some css by default. In your code the div with id portfolio has H2 element which has 10px margin in top and bottom added by web browser. Just add following css for that.

h2{
   margin-top:0px;
   padding-top:10px;
}

Remove the <hr> tag from the div with id intro.

Answer 2

There are some self-contradicting setting here:

#portfolio {
   background-image: url(http://www.marcysalisbury.com/wp-content/uploads/2011/09/background-dark1.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
}

Just erase the bottom three, making it

#portfolio {
  background-image: url(http://www.marcysalisbury.com/wp-content/uploads/2011/09/background-dark1.jpg);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
}

cover is enough to fill the DIV and contradicts with the settings below it.

Same for the other DIV, by he way.

Answer 3

Remove margin from h2 and remove <hr> to remove space

add h2 {margin : 0} in your css

body {
    color: white;
    font-family: monospace;
    font-size: 20px;
    text-align: center;
  }
  h1 {
    font-size: 100px;
    margin-left: auto;
    text-align: center;
  }
  .social-media img {
    height: 100px;
    width: 100px;
    border-radius: 40px;
  }
  #profile-pic {
    height: 250px;
    width: 250px;
    border-style: hidden;
    border-radius: 25px;
  }
  .albums img {
    height: 150px;
    width: 150px;
  }
#intro {
  background-image: url(https://www.clipartsgram.com/image/533949003-dark-abstract-1920x1080-wallpaper-2.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
}
#portfolio {
  background-image: url(http://www.marcysalisbury.com/wp-content/uploads/2011/09/background-dark1.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    background-position:center-top;
    background-position-x: 50%;
    background-position-y: 0%;
}
#entertainement {
}
.navbar .navbar-nav {
    display: inline-block;
    float: none;
}
.navbar .navbar-collapse {
    text-align: center;
}
hr {
  opacity: 0.5;
}
h2 {
  margin: 0;
}

<div class="container-fluid">
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#entertainement">Entertainement</a></li> 
      <li><a href="#contact">Contact Me</a></li> 
    </ul>
  </div>
</nav>
<div id="intro">
  <h1 class="text-center">My website</h1>
  <p>Bio:<br />bio line 1<br />bio line 2</p><br /><br /><br /><br />
  <img id="profile-pic" src="#" alt="profile pic">
  <p><br /><br />follow me on social media</p>
  <div class="social-media">
    <a href="#" target="_blank"><img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" alt="github"></a>
    <a href="#" target="_blank"><img src="http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram_App_Large_May2016_200.png" alt="my instagram"></a>
    <a href="#" target="_blank"><img src="https://oldschoolgameblog.files.wordpress.com/2016/06/steam-logo.png" alt="my steam"></a>
    <a href="#" target="_blank"><img src="https://avatars2.githubusercontent.com/u/9892522?v=3&s=400" alt="my yt"></a>
    <a href="#" target="_blank"><img src="https://pbs.twimg.com/profile_images/730090233849516032/dLWYa115.jpg" alt="my backloggery"></a>
  </div><br /> 
</div>
<div id="portfolio">
  <h2>My portfolio of nothing:</h2>
  <div class="albums">
    <a href="#" target="_blank"><img src="#" alt=""></a><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
</div>

Answer 4

I'm guessing there is a margin style (likely default browser styles) on the <h2>My portfolio of nothing:</h2> element, which is pushing down the entire #portfolio container.

Try resetting the h2's margin and pushing it down with padding like such:

h2 {
  margin: 0;
  padding: 20px 0;
}