縮小元素之間的間隙

Question

我目前正在創建一個網站上。 但是，我在縮小頁面最右邊的頁邊空白時遇到了一些麻煩。 如圖所示，我嘗試將正文設置為頁邊空白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 .pa { 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隱藏來找到解決方案；

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