jquery - 水平滚动右侧的间隙

Question

我有一个水平滚动，因为页面右侧在一定宽度后有空间。我似乎无法修复它。我猜是旋转木马或 bodyimg 导致了问题。有人可以帮助我了解我应该做什么以及在哪里做吗？此外，我有一个 .btn:hover 在 CSS 中不起作用，我想更改默认按钮悬停样式，但我也不知道该怎么做，如果有人能指出该怎么做，那就太好了!

编辑:我已经意识到这也发生在我的其他页面上，所以它可能不是我的旋转木马而是我的页脚或导航栏？

@charset "UTF-8";

*{
	margin: 0;
}


.nopadding{

	padding: 0;
}


.navbar {
  background: url(../images/mainnav.png) no-repeat top center;
  border-radius: 0;
  border: 0;
  height: 100px;
  max-width: 980px;
  margin: 0 auto;
}

.navspace {
  padding: 30px 46px 30px 46px;
}

.navposition {
  margin-left: 100px;
}

.navbar-brand {
  padding: 0;
  position: relative;
  left: 40px;
  top: 10px;
}

.icon-bar {

}

.thumbnails {
	position: relative;
	margin-top: 150px;
}

#myCarousel {
	width: 980px;
	height: 654px;
	bottom: 25px;
	margin: 0 auto;

}

.carousel-control {
	height: 600px;
}


.banner {
	background: url(../images/banner1.png) no-repeat top center;
	background-size: cover;
	width: 980px;
	height: 654px;
	left: 110px;
	bottom: 30px;
	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;
	position: absolute;
}

.contactinfo {

  color: #ff8300;
  margin: 200px 0px 0px auto;
  left: 50px;
}

/* Add a background color and some padding around the form */
.formarea {

  background:  url(../images/formbg.png) no-repeat ;
  width: 400px;
  height: 484px;
  margin-top: 50px;
  padding: 15px;
}

.formlabel {
  color: #fff;
}

.btn {
  background-color: #fcb972; 
  border-color: #ff9300;
}

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

.foot {

	background: url(../images/footer.png) no-repeat bottom center;
	height: 50px;
 	margin: 100px auto 0 auto;
 	position: absolute;
 	left: 0;
  	right: 0;

 	
}


footer {
	position: relative;
	color: #fff;
	display: block;
	text-align: right;
	margin-right: 350px;
	margin-top: 30px;
	font-size: 10px;

	

}




@media only screen and (max-width: 768px) {

    #myCarousel.carousel {
    max-width:100%;
    width:100%;
    max-height: 100%;
    }

    .navbar { 
  background-image: none; 
  background-color: #ff8300; 
  } 

    .findus { 

  margin: 0 auto;
  } 

  .centersocial { 
  position: relative;
  left: 50%;
  transform: ;
  } 

  .bodytext4 { 
  text-align: center;
  width: 250px;
  margin: 100px auto 5px auto;
  } 

  .bodytext3 { 
  text-align: center;
  width: 250px;
  margin: 60px auto 5px auto;
  } 

  .foot { 
  background-image: none; 
  background-color: #ff8300; 
  } 
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


<div class="container nopadding">
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="bs-example-navbar-collapse-1" aria- expanded="false">
          <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>

      <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
      <ul class="nav navbar-nav">
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navposition">
        <li class="navspace"><a href="index.html">Home</a></li>
        <li class="navspace"><a href="#">Menu</a></li>
        <li class="navspace"><a href="location.html">Location</a></li>
        <li class="navspace"><a href="contactus.html">Contact Us</a></li>
      </ul>
    </div> <!-- /.navbar-collapse -->
    </div> <!-- /.container-fluid -->
  </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">
      <img src="chicago.jpg" alt="Chicago">
    </div>

    <div class="item">
      <img src="ny.jpg" alt="New York">
    </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" src="images/bodyimg.png" 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>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

删除您在 .centersocial 上为 @media 断点 @media only 屏幕声明的 left: 50% 属性和(最大宽度:768px)，例如:

.centersocial {
  position: relative;
  /* left: 50%; remove this and consider alternatives which are responsive */
}

此外，在以下选择器上声明 max-width: 100%:

.row, #myCarousel, .container {
    max-width: 100%;
}

@charset "UTF-8";
* {
  margin: 0;
}

.nopadding {
  padding: 0;
}

.navbar {
  background: url(../images/mainnav.png) no-repeat top center;
  border-radius: 0;
  border: 0;
  height: 100px;
  max-width: 980px;
  margin: 0 auto;
}

.navspace {
  padding: 30px 46px 30px 46px;
}

.navposition {
  margin-left: 100px;
}

.navbar-brand {
  padding: 0;
  position: relative;
  left: 40px;
  top: 10px;
}

.icon-bar {}

.thumbnails {
  position: relative;
  margin-top: 150px;
}

#myCarousel {
  width: 980px;
  height: 654px;
  bottom: 25px;
  margin: 0 auto;
}

.carousel-control {
  height: 600px;
}

.banner {
  background: url(../images/banner1.png) no-repeat top center;
  background-size: cover;
  width: 980px;
  height: 654px;
  left: 110px;
  bottom: 30px;
  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;
  position: absolute;
}

.contactinfo {
  color: #ff8300;
  margin: 200px 0px 0px auto;
  left: 50px;
}


/* Add a background color and some padding around the form */

.formarea {
  background: url(../images/formbg.png) no-repeat;
  width: 400px;
  height: 484px;
  margin-top: 50px;
  padding: 15px;
}

.formlabel {
  color: #fff;
}

.btn {
  background-color: #fcb972;
  border-color: #ff9300;
}

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

.foot {
  background: url(../images/footer.png) no-repeat bottom center;
  height: 50px;
  margin: 100px auto 0 auto;
  position: absolute;
  left: 0;
  right: 0;
}

footer {
  position: relative;
  color: #fff;
  display: block;
  text-align: right;
  margin-right: 350px;
  margin-top: 30px;
  font-size: 10px;
}

@media only screen and (max-width: 768px) {
  #myCarousel.carousel {
    max-width: 100%;
    width: 100%;
    max-height: 100%;
  }
  .navbar {
    background-image: none;
    background-color: #ff8300;
  }
  .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;
  }
  .foot {
    background-image: none;
    background-color: #ff8300;
  }
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

/* additional */
* {
    box-sizing: border-box;
}

.row, #myCarousel, .container {
    max-width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


<div class="container nopadding">
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="bs-example-navbar-collapse-1" aria- expanded="false">
          <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>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
        <ul class="nav navbar-nav navposition">
          <li class="navspace"><a href="index.html">Home</a></li>
          <li class="navspace"><a href="#">Menu</a></li>
          <li class="navspace"><a href="location.html">Location</a></li>
          <li class="navspace"><a href="contactus.html">Contact Us</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </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">
            <img src="chicago.jpg" alt="Chicago">
          </div>

          <div class="item">
            <img src="ny.jpg" alt="New York">
          </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" src="images/bodyimg.png" 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>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>