How to remove this horizontal scrollbar in Bootstrap 3

I’ve got this irritating horizontal scroll on my bootstrap page. Can’t figure out what is making it behave like this or what to do about it?

JsFiddle link: http://jsfiddle.net/FatAlbert/cd1syrd9/2/

HTML:

<body>
  <div class="wrapper">
    <div class="row">
        <div class="header">
            <div class="container">
                <!-- navigation-->
                    <nav class="navbar navbar-default">
                        <div class="container-fluid">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">Meny</button>
                            <a class="navbar-brand" href="#"><img src="xxx" /></a>
                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                <ul class="nav navbar-nav">
                                    <li class="active"><a href="#">Start <span class="sr-only">(current)</span></a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                    <li><a href="#">Link</a></li>
                                </ul>
                            </div>
                        </div>
                    </nav><!-- / navigation-->
            </div>
        </div><!-- / header-->
    </div><!-- / container-->
    <div class="row">
        <div class="first-page-content">
            <div class="container">
                    <img class="img-responsive img-big" src="xx" />
                    <p>
                        Lorem ipsum dolor sit amet, arcu nulla. Maecenas congue, felis leo et, pulvinar sollicitudin lacinia libero rhoncus, nam dolor, velit leo ullamcorper massa. Risus netus facilisis tempus mollis, nullam nibh ridiculus potenti donec pulvinar proin. Sit in ultrices sed orci pellentesque, nunc tempor fusce fusce ultrices felis molestie. Lorem nam pellentesque integer urna nam.
                    </p>


            </div>
        </div>
    </div><!--/first-content-->
  </div>
  <div class="footer">
    <div class="container">
        <p class="pull-right">
            Some<br />
            Info<br />
        </p>
    </div>
  </div><!-- /footer-->
</body>

CSS:

html {
  position: relative;
  min-height: 100%;
}

body { margin-bottom: 160px; }
h1 { font-size: 2.5em; }
h2 { font-size: 1.5em; }

p {
  font-family: Verdana,Arial,sans-serif;
  font-size: 1.05em;
  line-height: 1.8;
  text-align: justify;
}

a {
  color: #0071BB;
  font-weight: bold;
}

.wrapper { }

.footer {
  position: absolute;
  padding-top: 25px;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 160px;
  background-color: #5FC8FF;
}

.header .glyphicon-wrench {
  margin: 0 3px;
}

.header h4 { margin-right: 3px; }


.img-responsive {
  display: block;
  margin: auto;
}


.img-responsive.img-big { margin-top: 75px; }

.navbar { border: none; }
.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse { text-align: center; }

.navbar-default .navbar-nav > li {
  width: 150px;
  margin-right: 2px;
}

.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover {
  color: #fff;
  font-weight: bold;
  background-color: #92C7E1;
}

.navbar-default .navbar-nav > li > a:hover {
  background-color: #98CEE5;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #fff;
  background-color: #98CEE5;
}

a.navbar-brand {
  padding: 5px;
}

.row { }

.alert { }

.well { }

.footer p {
  font-weight: bold;
  color: #FDFDFB;
}


@media (min-width: 992px) { }

@media (min-width: 768px) {
  .first-page-content p {
    margin: 75px auto 25px auto;
    width: 524px;
  }
}

solution

As per Bootstrap 3 documentation:

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

Therefore, add the class container to your .wrapper element.

Updated Example

<div class="wrapper container">
  <div class="row">
    ...
  </div>
</div>

As for an explanation, the .row class has -15px margins on each side.

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

The .container class effectively displaces that with the following:

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

In addition to reading the Bootstrap 3 docs, I’d suggest reading the article “ The Subtle Magic Behind Why the Bootstrap 3 Grid Works”.