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;
}
}
