There is a white space on the side of the page and cant get rid of it

Question

So on the right side of the Carousel there is a white gap and I tried to get ride of it but could not figure it out. It would help a lot if anyone knows how to fix it. I dont really know whats wrong so I made a Jsfiddle and added the css code below. Thanks for any help.

Jsfiddle

html,
body {
height: 100%;
width: 100%;
margin: none;
padding: none;
}   


@media(min-width:767px) {
.navbar {
    padding: 20px 0;
    -webkit-transition: background .5s ease-in-out,padding .5s ease-in-      out;
    -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
    transition: background .5s ease-in-out,padding .5s ease-in-out;
}

.top-nav-collapse {
    padding: 0;
}
}

.carousel,
.item,
.active {
height: 100%;
}

.carousel-inner {
height: 100%;
}

.fill {
margin-right: -50px;
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

.intro-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}

Answer 1

Add this little CSS:

body{
    overflow-x: hidden;
}

FIDDLE: https://jsfiddle.net/lmgonzalves/zqrpg882/1/

Answer 2

Just override this code of Bootstrap to 0px:

.row {
    margin-right: -15px;
    margin-left: -15px;
}

So that it looks like this:

.row {
    margin-right: 0;
    margin-left: 0;
}

This makes the scrollbar to disappear.

Answer 3

You need to remove the margin from the .row class

From this:

.row{
margin-right: -15px;
margin-left: -15px; 
}

To this:

.row{
margin-right: 0px;
margin-left: 0px; 
}

Please see the JSfiddle for the example working

Answer 4

Wrap the row inside a container. Without using a container and directly using a row will make it create white space since it has negative margin. 78th line below:

<div class="intro-section container-fluid">
  <div class="row">

JSfiddle