Gaps/Spaces on left and right of nav and carousel in mobile - html

Question

I'm using bootstrap 3.3.7. I've adapted the navbar template provided from the bootstrap documentation and a carousel from W3. My footer's width extends all the way to the side edges but my carousel and nav do not (in fact my carousel does not even extend to the same width as my nav). How do I fix this?
Image of problem:
#charset "UTF-8";
* {
margin: 0;
}
html body {
height: 100%;
}
.nopadding {
padding: 0;
}
.navbar {
background-color: #ff8300;
border-radius: 0 0 10px 10px;
border: 0;
height: 100px;
width: 100%;
max-width: 980px;
margin: 0 auto;
}
.navspace {
right: 50px;
margin-top: 25px;
position: relative;
font-size: 18px;
color: #fff;
}
.navbar-brand {
padding: 0;
position: relative;
left: 40px;
top: 10px;
}
.thumbnails {
position: relative;
margin-top: 150px;
}
#myCarousel {
width: 980px;
max-width: 100%;
height: 654px;
bottom: 25px;
border-radius: 0 0 10px 10px;
}
.carousel-control {
height: 600px;
opacity: 0;
border-radius: 0 0 10px 10px;
}
.banner {
background: url(../images/banner1.jpg) no-repeat top center;
background-size: cover;
width: 980px;
height: 654px;
background-size: 100% auto;
}
.banner2 {
background: url(../images/banner2.jpg) no-repeat top center;
background-size: cover;
width: 980px;
height: 654px;
background-size: 100% auto;
}
.banner3 {
background: url(../images/banner3.jpg) no-repeat top center;
background-size: cover;
width: 980px;
height: 654px;
background-size: 100% auto;
}
.banner p {
position: relative;
font-size: 25px;
color: #fff;
top: 440px;
left: 20px;
}
.banner h1 {
position: relative;
font-size: 50px;
color: #fff;
left: 20px;
top: 420px;
}
.bodyimg {
max-width: 100%;
}
.bodytext1 {
color: #ff8300;
}
.bodytext2 {
color: #ff8300;
width: 160px;
margin-top: 37px;
}
.bodytext3 {
color: #ff8300;
margin-top: 60px
}
.bodytext4 {
color: #ff8300;
margin-top: 60px
}
.socialpadding {
padding: 0px 10px 0px 10px;
position: relative;
}
.centersocial {
margin: 0 auto;
text-align: center;
position: absolute;
}
.contactinfo {
color: #ff8300;
margin: 200px 0px 0px auto;
}
/* Add a background color and some padding around the form */
.formarea {
background-color: #ff8300;
border-radius: 10px;
width: 400px;
height: 484px;
margin: 50px auto 0px auto;
padding: 15px;
}
.formlabel {
color: #fff;
}
#inputMessage {
height: 200px;
}
.btn {
background-color: #fcb972;
border-color: #ff9300;
margin-top: 20px;
}
.btn:hover {
background-color: #fff;
border-color: #ff9300;
color: #ff8300;
}
.btn:onclick {
background-color: #fff;
border-color: #ff9300;
color: #ff8300;
}
.messageform {
height: 50px;
}
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
margin-top: 50px;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.formarea2 {
background-color: #fff;
border-radius: 10px;
width: 400px;
height: 50px;
margin: 50px auto 0px auto;
padding: 15px;
display: inline;
text-align: center;
}
#inputPostal {
display: inline-block;
width: 30%;
margin-left:3%;
}
.formpostal {
color: #ff8300;
font-size: 30px;
display: inline-block;
}
.menubg {
background-color: #ff8300;
height: 100%;
width: 100%;
max-width: 980px;
border-radius: 10px;
margin: 125px;
}
.col-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
.cartbtn {
margin-top: 20px;
position: relative;
left: 96%;
}
h2 {
font-size: 24px;
color: #fff;
text-align: center;
margin-top: 30px;
}
.menubox {
background-color: #fff;
border-radius: 10px;
width: 321px;
height: 320px;
margin-top: 30px;
position: relative;
}
.menubox a {
text-decoration: none;
}
.item1 {
background: url(../images/menu1.jpg) no-repeat center;
border-radius: 10px 10px 0px 0px;
}
.menubox img {
border-radius: 10px 10px 0px 0px;
opacity: 0;
transition: .5s ease;
backface-visibility: hidden;
}
.menubox:hover .item1 {
opacity: 0.7;
transition: .5s ease;
}
.menubox:hover img {
opacity: 1;
transition: .5s ease;
}
h3 {
font-size: 16;
color: #ff8300;
}
.foot {
background-image: none;
background-color: #ff8300;
border-radius: 10px 10px 0 0;
height: 50px;
margin: 150px auto 0 auto;
position: absolute;
width: 100%;
max-width: 980px;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
footer {
position: relative;
color: #fff;
text-align: right;
margin-top: 30px;
font-size: 10px;
width: 100%;
max-width: 980px;
}
#media only screen and (max-width: 992px) {
.navbar {
background-image: none;
background-color: #ff8300;
width: 100%;
border-radius: 0px;
margin: 0;
}
.navspace {
padding: 0px 20px 0px 0px;
left: 120px;
top: 30px;
}
.navbar-collapse {
background: rgba(255, 255, 255, 0.75);
height: 300px;
}
.foot {
background-image: none;
background-color: #ff8300;
border-radius: 0;
overflow: hidden;
}
footer {
position: relative;
color: #fff;
display: block;
text-align: right;
font-size: 10px;
}
.contactinfo {
margin: 40px auto 0px auto;
text-align: center;
}
}
#media only screen and (max-width: 767px) {
#myCarousel.carousel {
max-width: 100%;
width: 100%;
max-height: 100%;
overflow: hidden;
border-radius: 0 0 10px 10px;
}
.carousel-control {
height: 600px;
opacity: 0;
}
.findus {
margin: 0 auto;
}
.centersocial {
position: relative;
}
.bodytext4 {
text-align: center;
width: 250px;
margin: 100px auto 5px auto;
}
.bodytext3 {
text-align: center;
width: 250px;
margin: 60px auto 5px auto;
}
}
#media only screen and (max-width: 576px) {
.formarea {
background-color: #ff8300;
border-radius: 10px;
width: 350px;
height: 484px;
margin: 50px auto 0px auto;
padding: 15px;
}
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
/* additional */
.row, #myCarousel, .container {
max-width: 100%;
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Peperoni Pizzeria</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-static-top rounded-bottom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt=""></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="navspace" href="index.html">Home</a></li>
<li><a class="navspace" href="menu.html">Menu</a></li>
<li><a class="navspace" href="location.html">Locations</a></li>
<li><a class="navspace" href="contactus.html">Contact Us</a></li>
<!-- Put here your menu items -->
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div class="row">
<div class="col-sm-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active banner">
<p>10% off all pizzas
<br>this weekend only</p>
<h1>LIMITED TIME<br>ONLY</h1>
</div>
<div class="item banner2">
</div>
<div class="item banner3">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="row thumbnails">
<div class="col-sm-offset-1 col-sm-3">
<img class="img-responsive center-block img-rounded" src="images/bodyimg.jpg" alt="">
</div>
<div class="col-md-offset-1 col-md-3 hidden-sm hidden-xs">
<p class="bodytext1">
Year 2004.<br><br> The warmth and comfort of wood-fired pizzas and traditional pastas over chilled drinks with friends and families became an everyday affair that started with the first Peperoni, located in Greenwood Singapore. Charming, vivacious
and full of life, Peperoni Greenwood brings together food lovers from all walks of life. Including many well known and young artists whose work adorn its walls with their expressions of love and creativity. Peperoni Greenwood inspired its owners,
the highly acclaimed Les Amis group, to spread the love and energy of Peperoni with the opening of new outlets across the sunny island of Singapore.
</p>
</div>
<div class="col-md-offset-1 col-md-3 hidden-xs">
<p class="bodytext2">
Peperoni has since evolved into a much-loved destination with its ‘Appetite for Life’ philosophy. This philosophy makes Peperoni more than just a restaurant, as it is a place with a mission - to bring people together, to bind relationships, and to savour
life in all its delightful flavours.<br><br> Share moments of fun, energy and inspiration over hot pizzas and cool conversations!
</p>
</div>
</div>
<div class="row">
<div class="col-sm-offset-1 col-sm-3">
<p class="bodytext3">
Check us out on our social media accounts or subscribe to our newsletter for the latest updates!
</p>
<div class="centersocial">
<a href="#"><img class="socialpadding" src="images/email.png" alt="">
</a>
<a href="https://www.instagram.com/peperonipizzeria/"><img class="socialpadding" src="images/insta.png" alt="">
</a>
<a href="https://www.facebook.com/peperonipizzeria/"><img class="socialpadding" src="images/fb.png" alt="">
</a>
</div>
</div>
<div class="col-sm-offset-1 col-sm-3">
<p class="bodytext4">
Feel free to come explore our outlets
</p>
<a href="locations.html"><img class="findus img-responsive" src="images/findus.png" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col-sm-12 foot img-responsive">
<footer class"navbar-fixed-bottom">
Copyright © 2017 Peperoni Pizzeria. All Rights Reserved.
</footer>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>