How do I remove the white space to the right of my web page?

This assignment is to create a simple responsive web page using Twitter Bootstrap where the Foldable Button appears only on additional small devices and only on the brand name on larger devices. And I think I have achieved this goal.

But the problem is this annoying white space to the right of my webpage on all devices (I tested with Chrome developer tools).

Any suggestions to remove the Space as it makes the web page more compact and more attractive to view. Thanks in advance. I added a whitespace image and a link to my code.

CSS code,

/*html
{
    overflow-x: hidden;
    overflow-y: scroll;
}*/
body{
    font-family: 'Comfortaa', cursive;
}
/*Header Section*/
#brand-name{
    position: relative;
    bottom:20px;
    left: 1px;
    text-decoration:none;
}
.nav-LLC{
    border-radius: 0px;
}


}
#nav-list{
    margin-top: 10px;
}
#nav-list a {
  text-align: center;
  background-color: #e1e6ed;
  font-size: 1.1em;
  font-weight: bolder;
}
#nav-list a:hover{
    background-color: #96d4e8;
}
/*End of Header Section*/

/* Only for Extra Small Devices*/

@media (max-width: 500px){
    h1{
        font-size: 7vw;
    }
    h2{
        font-size: 7vw;
    }
}

/*Start of Body Section*/ 
h2{
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
    font-color: #0b0821;
}
.row section{

}
.row section p{
    text-align: justify;
    background-color: #e1e6ed;
}
h4{
    position: relative;
    left: 40%;*/
    font-weight: bold;
    color: #0b2730;
    /*background-color: #e1e6ed;
    margin: 0px;*/
}
/*End of Body Section*/

      

        
        
        
      

    

HTML code,

<header>
    <nav id="nav-LLC" class="navbar navbar-default ">
        <div class="container">
            <div class="navbar-header">
                <div class="navbar-brand">
                    <a  id="brand-name" href="index.html" ><h1> Food,LLC </h1></a>
                </div>

                <div class="button-class">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapsable" aria-expanded="false" >
                    <span class="sr-only"> Toggle Navigation</span>
                    <span class="icon-bar"></span> <!--Icon Bar is three lines in the icon-->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                </div>

            </div><!-- Navbar-header -->
            <section class="visible-xs">
            <div id="nav-collapsable" class="collapse navbar-collapse" >
                <ul id="nav-list"  class="nav navbar-nav navbar-right">
                    <li><a href="#chicken"><span>Chicken</span></a></li>
                    <li><a href="#beef"><span>Beef</span></a></li>
                    <li><a href="#sushi"><span>Sushi</span></a></li>
                    <!--<li><a href="#"><span>Cookies</span><br></a></li>-->
                </ul>
            </div>
            </section>
        </div>
    </nav>
</header>



<div class="container">
<h2>Our Menu</h2>
<div class="row">
<section id="chicken" class="col-md-4 col-sm-6 col-xs-12">
<h4>Chicken</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>

<section id="beef" class="col-md-4 col-sm-6 col-xs-12">
<h4>Beef</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>

<section id="sushi" class="col-md-4 col-sm-12 col-xs-12">
<h4>Sushi</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>

</div>
</div>


<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

      

        
        
        
      

    

Link to HTMl and CSS code

https://jsfiddle.net/w5v6yr9q/

link to the image

https://i.stack.imgur.com/ieRok.png

Edit : Thank you so much! Today I learned something new!