I'm making a website with bootstrap and I've run into a problem. When I use width: 100% on one of my divs, the background color doesn't fully expand to 100%. It only expands to 90% or so (5% of the left and 5% of the right side show the body background color). I apppriciate any help.

HTML:

```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width = device-width, initial-scale = 1">
        <title>Galaxy</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <style type="text/css">
</style>
<script>
    var sound = new Audio();
    sound.src = "rick.mp3";
 </script>
    </head>
        <body>
            <div id="theCarousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#theCarousel" data-slide-to="1"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="images/galaxy3.jpg">
                        <div class="slide1"></div>
                        <div class="carousel-caption">
                            <div class="bannertext">
                                <h1>Santorodesign</h1>
                                <p>A website made by Michael</p>
                                <div class="mobileHide"> <button id="headerbutton-nederlands">Nederlands</button></div>
                                <div class="mobileHide"> <button id="headerbutton-english">English</button></div>
                            </div>                              
                        </div>
                </div>
                <div class="item">
                    <div class="slide2"></div>
                    <img src="images/galaxy2.jpg">
                    <div class="carousel-caption">
                        <div class="bannertext2">
                            <h1>Explore the galaxy<h1>
                    </div>
                </div>          
            </div>

                <a class="left carousel-control" href="#theCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>

                <a class="right carousel-control" href="#theCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span> 
                </a>            
            </div>
        </div>
        <div id="firstrow">
            <div class="planettext">
                Planets
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/mercury.png"> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Mercury</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/earth.png"> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about the Earth</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/venus.png"> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Venus</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/mars.png"> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Mars</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/jupiter.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about jupiter</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/saturn.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Saturn</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/uranus.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Uranus</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
                <img src="images/neptune.png"><br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Neptune</button></a>
            </div>
            <div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">

            </div>
                <div class="planet col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div id="pluto">
                <div class="plutotext">
                    Poor Pluto
                </div>
                <href="##" onmousedown="sound.play()"><img src="images/pluto.png"></a> <br>
                <a href="#"><button type="submit" class="btn-primary btn-lg">Learn more about Pluto</button></a>
                </div>
            </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script> 
    </body>
</html>

```

CSS:

```
html {
    margin: 0;
}
body {
    background: #DCDCDC;
    width: 100%;
    margin: 0;
}
.carousel-control.left, .carousel-control.right {
    background-image: none
}
#firstrow {
   font-size: 2em;
   padding: 0px 0 0 0;
   width: 100%;
   text-align: center;
   color: black;
   position: relative;
}
#firstrow span {
    font-family: Impact, Impact5, Charcoal6, sans-serif;
    font-size: 1.3em;
}
#firstrow p {
    font-family: Helvetica,
}
@media all and (max-width: 2000px) {
    #headerbutton-nederlands {
         position: absolute;
         bottom: 0px;
         right: -90px;
         line-height: 40px;
    }
}
.planettext {
    text-align: center;
    font-size: 1.5em;
    color: #000;
    margin-top: 200px;
    margin-bottom: 30px;
    width: 100%;
    background-color: #DCDCDC;
    font-weight: bold;
}
.plutotext {
    text-align: center;
    font-size: 1.5em;
    color: #000;
    margin-top: 100px;
    margin-bottom: 30px;
    width: 100%;
    background-color: #D3D3D3;
    font-weight: bold;
    margin: 00;
}
#pluto {
    background-color: #D3D3D3;
    height: 550px;
    width: 100%;

}
@media all and (max-width: 900px) {
    #headerbutton-nederlands { display: none; }
    #headerbutton-english { display: none; }
}
@media all and (max-width: 2000px) {
     #headerbutton-nederlands {
         position: absolute;
         bottom: 0px;
         right: -70px;
         line-height: 40px;
     }
}

@media all and (max-width: 1450px) {
    #headerbutton-nederlands {
        position: absolute;
        font-size: 14px;
        line-height: 30px;
        right: -55px;
    }
}
@media all and (max-width: 1200px) {
    #headerbutton-nederlands {
        font-size: 13px;
        line-height: 25px;
        right: -55px;
        }
}
@media all and (max-width: 1080px) {
    #headerbutton-nederlands {
        font-size: 10px;
        line-height: 20px;
        right: -40px;
    }
}
@media all and (max-width: 2000px) {
     #headerbutton-english {
         position: absolute;
         bottom: 0px;
         right: 100px;
         line-height: 40px;
     }
}

@media all and (max-width: 1450px) {
    #headerbutton-english {
        position: absolute;
        font-size: 14px;
        right: 80px;
        line-height: 30px
    }
}
@media all and (max-width: 1200px) {
    #headerbutton-english {
        font-size: 13px;
        line-height: 25px;
        right: 50px;
        }
}
@media all and (max-width: 1080px) {
    #headerbutton-english {
        font-size: 10px;
        line-height: 20px;
        right: 50px;
    }
}

.planet {
    margin-bottom: 30px;
    position: relative;
}
    .planet img {
        height: 300px;
        max-width: none;
        margin-bottom: 20px;
    }

    .bannertext {
         font-size: 1.3em;
         line-height: 15px;
         position: relative;
    }
    .bannertext h1 {
        font-size: 2em;
    }
    .bannertext2 {
        font-size: 2em;
    }
 .mobileShow { display: none;}
 .mobileHide { display: inline;}
     /* Smartphone Portrait and Landscape */
    @media only screen
        and (max-device-width : 480px){
        .mobileShow { display: inline;}
        .mobileHide { display: none;}
        .planet img{
            height: 200px;
        }
        }
#headerbutton-nederlands {
    position: absolute;
    font-weight: bold;
    -webkit-border-radius: 5px;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;    
}
#headerbutton-english {
    position: absolute;
    font-weight: bold;
    -webkit-border-radius: 5px;
    color: white;
    background-color: #778899;
    width: 13%;
    text-align: center;  
    border: white 2px solid ;
}

```

Thank you for your time.