javascript - 关闭元素之间的 margin 差距

Question

我目前正在创建一个网站。但是，我在缩小页面最右侧的边距差距时遇到了一些问题 As seen in this picture我尝试将 body 设置为 margin 0px，但这没有帮助。任何帮助都将不胜感激，我出错的地方的细节将很有见地。谢谢!

body {
  margin: 0px;
  background-color: #1a1a1a;
  font-weight: 100;
  line-height: 1.7857;
  letter-spacing: .075em max-width: 100%;
}

.nav {
  border-width: 1px 0;
  list-style: none;
  background: linear-gradient(to top right, #0b0b0b, #494848);
  overflow: hidden;
  width: 100%;
  height: 77px;
  background-color: #000000;
  margin-top: 0px margin-bottom: 0px;
  margin: 0 auto;
}

.nav li {
  display: inline;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 100 line-height: 1.7857;
  letter-spacing: .075em;
  float: right !important;
  margin: 20px;
  margin-right: 4%;
  line-height: 1.7857;
  letter-spacing: .075em;
}

.nav a {
  color: white;
  text-decoration: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav img {
  margin-left: 4%;
}


/*
Bootstrap Image Carousel Slider with Animate.css
Code snippet by Hashif (http://hashif.com) for Bootsnipp.com
Image credits: unsplash.com
*/

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);
body {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
}


/********************************/


/*          Main CSS     */


/********************************/

#first-slider .main-container {
  padding: 0;
}

#first-slider .slide1 h3,
#first-slider .slide2 h3,
#first-slider .slide3 h3,
#first-slider .slide4 h3 {
  color: #fff;
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 700;
}

#first-slider .slide1 h4,
#first-slider .slide2 h4,
#first-slider .slide3 h4,
#first-slider .slide4 h4 {
  color: #fff;
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 700;
}

#first-slider .slide1 .text-left,
#first-slider .slide3 .text-left {
  padding-left: 40px;
}

#first-slider .carousel-indicators {
  bottom: 0;
}

#first-slider .carousel-control.right,
#first-slider .carousel-control.left {
  background-image: none;
}

#first-slider .carousel .item {
  min-height: 425px;
  height: 100%;
  width: 100%;
}

.carousel-inner .item .container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0px;
  top: 0;
  left: 0;
  right: 0;
}

#first-slider h3 {
  animation-delay: 1s;
}

#first-slider h4 {
  animation-delay: 2s;
}

#first-slider h2 {
  animation-delay: 3s;
}

#first-slider .carousel-control {
  width: 6%;
  text-shadow: none;
}

#first-slider h1 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 30px;
  font-weight: bold;
}

#first-slider .p {
  padding-top: 125px;
  text-align: center;
}

#first-slider .p a {
  text-decoration: underline;
}

#first-slider .carousel-indicators li {
  width: 14px;
  height: 14px;
  background-color: rgba(255, 255, 255, .4);
  border: none;
}

#first-slider .carousel-indicators .active {
  width: 16px;
  height: 16px;
  background-color: #fff;
  border: none;
}

.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.carousel-fade .carousel-control {
  z-index: 2;
}

.carousel-control .fa-angle-right,
.carousel-control .fa-angle-left {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}

.carousel-control .fa-angle-left {
  left: 50%;
  width: 38px;
  height: 38px;
  margin-top: -15px;
  font-size: 30px;
  color: #fff;
  border: 3px solid #ffffff;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  border-radius: 53px;
}

.carousel-control .fa-angle-right {
  right: 50%;
  width: 38px;
  height: 38px;
  margin-top: -15px;
  font-size: 30px;
  color: #fff;
  border: 3px solid #ffffff;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  border-radius: 53px;
}

.carousel-control {
  opacity: 1;
  filter: alpha(opacity=100);
}


/********************************/


/*       Slides backgrounds     */


/********************************/

#first-slider .slide1 {
  background-image: url(https://i.imgur.com/LUIbnzG.png);
  background-size: cover;
  background-repeat: no-repeat;
}

#first-slider .slide2 {
  background-image: url(https://i.imgur.com/agI540K.png);
  background-size: cover;
  background-repeat: no-repeat;
}

#first-slider .slide3 {
  background-image: url(https://i.imgur.com/owkaQW7.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

#first-slider .slide4 {
  background-image: url(https://i.imgur.com/MpzqHnf.png);
  background-size: cover;
  background-repeat: no-repeat;
}


/********************************/


/*          Media Queries       */


/********************************/

@media screen and (min-width: 980px) {}

@media screen and (max-width: 640px) {}

.carousel-inner {
  margin-top: 0px;
}


/***Site article**********/

.article-container {
  margin-top: 6.0em;
  background-color: red;
}

.articletitle h3 {
  color: white;
  font-family: 'Allerta', Helvetica, Arial, sans-serif;
  font-weight: bold;
  margin-left: 45px;
  margin-top: 25px;
  border-style: 3px solid;
  border-radius: 1px;
  background-color: black;
  width: 640px;
  padding-left: 10px;
  text-shadow: 0.5px 0.5px;
}

#pg1p {
  font-family: 'Allerta', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: normal;
  text-transform: none;
  width: 80%;
  color: white;
  margin-top: 4.0em;
  margin-left: 10px;
  line-height: 29px;
}

#pg1img img {
  margin-left: 5%;
  margin-top: 50px;
  position: static;
  border-radius: 8px;
}


/*****HOW IT WORKS***/

#employment {
  background-color: #f5f5f5;
  padding-top: 70px;
  padding-bottom: 70px;
}

.section-title {
  margin-bottom: 50px;
  font-size: 14px;
  font-weight: 200;
}

.st-service {
  margin-top: 30px;
}


/*********FOOTER****/

footer {
  width: 100%;
  background-color: red;
  padding: 60px 0px;
}

<!DOCTYPE html>
<html lang="eng">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title> Hayat Express</title>



  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
  <link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">



</head>

<body>

  <ul class="nav">

    <img src="logos/navbar-logo.png">

    <li><a class="hover" href="#Contact">Contact</a></li>
    <li><a class="active" href="#Careers">Careers</a></li>
    <li><a class="active" href="#Services">Services</a></li>
    <li><a class="active" href="#Drivers">Drivers</a></li>
  </ul>
  </div>






  <div id="first-slider">
    <div id="carousel-example-generic" class="carousel slide carousel-fade">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
      </ol>
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <!-- Item 1 -->
        <div class="item active slide1">
          <div class="row">
            <div class="container">
              <div class="col-md-3 text-right">
                <img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://i.imgur.com/JeFTT4W.png">
              </div>
              <div class="col-md-9 text-left">
                <h3 data-animation="animated bounceInDown">Partnership with Hayat Express &reg;</h3>
                <h4 data-animation="animated bounceInUp">Deliver packages in your area</h4>
              </div>
            </div>
          </div>
        </div>
        <!-- Item 2 -->
        <div class="item slide2">
          <div class="row">
            <div class="container">
              <div class="col-md-7 text-left">
                <h3 data-animation="animated bounceInDown">
                  <h3> Global Critical Delivery</h3>
                  <h4 data-animation="animated bounceInUp">For your most challenged delivery </h4>
              </div>
              <div class="col-md-5 text-right">
                <img style="max-width: 200px;" data-animation="animated zoomInLeft" src="https://s18.postimg.org/l8cplxczd/forklift.png">
              </div>
            </div>
          </div>
        </div>
        <!-- Item 3 -->
        <div class="item slide3">
          <div class="row">
            <div class="container">
              <div class="col-md-7 text-left">
                <h3 data-animation="animated bounceInDown">Residencial E-Commerce</h3>
                <h4 data-animation="animated bounceInUp">Providing Service to Consumers Worldwide</h4>
              </div>
              <div class="col-md-5 text-right">
                <img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/eq8xvxeq5/globe_network.png">
              </div>
            </div>
          </div>
        </div>
        <!-- Item 4 -->
        <div class="item slide4">
          <div class="row">
            <div class="container">
              <div class="col-md-7 text-left">
                <h3 data-animation="animated bounceInDown">Global Critical Delivery</h3>
                <h4 data-animation="animated bounceInUp">For your most challenged delivery </h4>
              </div>
              <div class="col-md-5 text-right">
                <img style="max-width: 200px;" data-animation="animated zoomInLeft" src="http://s20.postimg.org/9vf8xngel/internet_speed.png">
              </div>
            </div>
          </div>
        </div>

        <!-- End Item 4 -->

      </div>
      <!-- End Wrapper for slides-->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <i class="fa fa-angle-left"></i><span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <i class="fa fa-angle-right"></i><span class="sr-only">Next</span>
      </a>
    </div>
  </div>



  <div class="article-container">
    <div class="articletitle">
      <h3>CONNECTING YOU TO THE PRODUCTS YOU NEED</h3>
    </div>
  </div>






  <div class="row">


    <div class="container-fluid">

      <div id="pg1img">
        <div class="col-md-6">
          <img src="logos/section1.png">
        </div>
      </div>


      <div class="row">
        <div class="col-md-5">

          <div id="pg1p">
            <p>You deserve a great delivery experience. You want your favorite products delivered to you fast, with free shipping and no hassles.
              <br>
              <p>We help leading and emerging internet retailers get you what you want. Whether we’re delivering your meal kits to help you quickly prepare dinner, or helping you avoid a last-minute trip to the store, our goal is to give you more time for
                what’s important by delivering your favorite products to you — fast.</p>
          </div>
        </div>
      </div>
    </div>
  </div>















  <!--How it works-->

  <section id="employment">
    <div class="container">
      <div class="row" align="center">
        <div class="section-title">
          <h1>How it works</h1>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6 col-sm-7 st-service">
          <br>
          <p>
            HyatExpress operates within the largest and fastest growing metro areas in the eastern United States. Our 60+ operational facilities and four sorting hubs are staffed by people who take pride in supporting you with consistent performance, and are excited
            to be a part of the newly-emerging and sophisticated logistics economy. LaserShip parcels are brought to you by people with a passion for improving the delivery experience. Many have made a career as delivery professionals, others may deliver
            as a supplemental job, and some are gig-economy millennials delivering parcels throughout their busy schedules. Together, we’re able to deliver packages to you faster than national carriers. </p>


        </div>





        <div class="col-md-6 col-sm-7 st-service">

          <br>

          <img src="https://www.lasership.com/img/section/customer.jpg">

        </div>
      </div>
    </div>
  </section>













































  <script>
    (function($) {

      //Function to animate slider captions 
      function doAnimations(elems) {
        //Cache the animationend event in a variable
        var animEndEv = 'webkitAnimationEnd animationend';

        elems.each(function() {
          var $this = $(this),
            $animationType = $this.data('animation');
          $this.addClass($animationType).one(animEndEv, function() {
            $this.removeClass($animationType);
          });
        });
      }

      //Variables on page load 
      var $myCarousel = $('#carousel-example-generic'),
        $firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");

      //Initialize carousel 
      $myCarousel.carousel();

      //Animate captions in first slide on page load 
      doAnimations($firstAnimatingElems);

      //Pause carousel  
      $myCarousel.carousel('pause');


      //Other slides to be animated on carousel slide event 
      $myCarousel.on('slide.bs.carousel', function(e) {
        var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
        doAnimations($animatingElems);
      });
      $('#carousel-example-generic').carousel({
        interval: 3000,
        pause: "false"
      });

    })(jQuery);
  </script>





  <footer>




  </footer>

</body>

</html>

Answer 1

我刚刚通过添加 padding 0px 和 overflow-x hidden 找到了解决方案；

html,body {
  ;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}