How to Remove the empty Space at the Right of my Webpage?

This is an assignment to design a simple Responsive web page using Twitter Bootstrap where a Collapsible Menu Button appears only on extra small Devices and Just The brand Name on Larger devices.And I think I achieved that goal.

But the problem is this annoying white space towards the right of my web page,across all devices(I tested using Chrome Developer Tools).

Any Suggestions to remove the Space,as it makes the web page more compact and Nice to view.Thanks in advance. I've attached an image of the white space 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 people!! Learned something new today!