无法摆脱左右滚动条

Question

伙计们，我遇到了一个小小的但令人讨厌的问题，我无法弄清楚。网页右侧大约有20个额外像素，会产生不必要的滚动条。你们可能会看到更多的额外空间，这可能是查看他人代码时视图宽度stackoverflow给您的结果，或者可能是您使用的设备的屏幕尺寸，我不知道。任何帮助都会很棒，再次感谢！

html,
body {
  margin: 0;
  padding: 0;
}

.side-menu {
  position: fixed;
  top: 165px;
  background-color: white;
  width: 299.5px;
  padding: 10px;
  transition: all 2s ease;
  left: -400px;
  transition: all 0.2s ease;
  z-index: 11;
  height: 390px;
}

.fa-times {
  font-size: 30px;
  position: fixed;
  color: white;
  left: -338px;
  top: 168px;
  transition: all 0.2s ease;
  z-index: 11;
}

.fa-times:hover {
  transform: scale(1.2);
}

.side-menu ul {
  list-style-type: none;
  text-align: center;
}

.side-menu li {
  color: grey;
  font-size: 1.8rem;
  margin: 6px;
  margin-left: -35px;
  margin-bottom: 35px;
  font-family: 'Josefin sans';
}

.side-menu li:hover {
  color: orange;
  cursor: pointer;
}

.menu-bars {
  position: fixed;
  left: 50px;
  top: 80px;
  z-index: 11;
}

.b1,
.b2,
.b3 {
  position: relative;
  width: 60px;
  height: 7px;
  background-color: red;
  margin: .55rem;
  left: 0px;
  top: 0px;
  border-radius: 9px;
}

.b1 {
  background-color: lightgreen;
  animation-duration: 0.15s;
  animation-fill-mode: forwards;
}

.b2 {
  background-color: white;
  animation-duration: 0.15s;
  animation-fill-mode: forwards;
}

.b3 {
  background-color: #ff4d4d;
  animation-duration: 0.15s;
  animation-fill-mode: forwards;
}

@keyframes b1-animate {
  from {}
  to {
    width: 60px;
    height: 8px;
    position: relative;
    left: -67px;
    top: 49px;
    width: 100px;
    border-radius: 0;
    background-color: lightgreen;
  }
}

@keyframes b1-reverse {
  from {
    width: 60px;
    height: 8px;
    position: relative;
    left: -67px;
    top: 49px;
    width: 100px;
    border-radius: 0;
    background-color: lightgreen;
  }
  to {
    width: 60px;
    height: 7px;
    margin: .55rem;
    left: 0px;
    top: 0px;
    border-radius: 9px;
  }
}

@keyframes b2-animate {
  from {}
  to {
    width: 60px;
    height: 8px;
    position: relative;
    left: 33px;
    top: 32.5px;
    width: 150px;
    height: 7.75px;
    border-radius: 0;
    background-color: white;
  }
}

@keyframes b2-reverse {
  from {
    width: 60px;
    height: 8px;
    position: relative;
    left: 33px;
    top: 32.5px;
    width: 150px;
    height: 7.75px;
    border-radius: 0;
    background-color: white;
  }
  to {
    width: 60px;
    height: 7px;
    margin: .55rem;
    left: 0px;
    top: 0px;
    border-radius: 9px;
  }
}

@keyframes b3-animate {
  from {}
  to {
    width: 60px;
    height: 8px;
    position: relative;
    top: 16px;
    left: 161px;
    width: 100px;
    border-radius: 0;
    background-color: #ff4d4d;
  }
}

@keyframes b3-reverse {
  from {
    width: 60px;
    height: 8px;
    position: relative;
    top: 16px;
    left: 161px;
    width: 100px;
    border-radius: 0;
    background-color: #ff4d4d;
  }
  to {
    width: 60px;
    height: 7px;
    margin: .55rem;
    left: 0px;
    top: 0px;
    border-radius: 9px;
  }
}

.intro {
  background: blue;
  width: 100vw;
  height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  margin-bottom: 0;
}

h1 {
  font-family: 'Cedarville Cursive';
  position: absolute;
  left: 700px;
  top: 50px;
  color: white;
  font-size: 3rem;
}

h2 {
  text-align: center;
  font-family: 'Cedarville Cursive';
  font-size: 3rem;
  padding: 30px;
  color: white;
}

.about-us {
  margin-top: -40px;
  padding-bottom: 90px;
  background-color: #339966;
  width: 100vw;
}

.underline {
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -120px;
  background-color: orange;
  width: 0;
  height: 3px;
  border-radius: 1.5px;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  transition-timing-function: ease-out;
}

@keyframes line {
  from {
    width: 0px;
  }
  to {
    width: 220px;
    left: 15px;
  }
}

p {
  position: relative;
  padding-left: 20px;
  top: -60px;
  color: white;
  font-size: 1.75rem;
  word-spacing: 7px;
  width: 400px;
  font-family: 'Josefin sans';
  margin-left: 155px;
}

.fa-caret-down {
  position: absolute;
  width: 50px;
  height: 50px;
  font-size: 60px;
  color: lightgrey;
  left: 665px;
  bottom: -23rem;
  transform: rotate(90deg);
  transition: all 0.5s ease;
  z-index: 12;
}

.fa-caret-down:hover {
  color: white;
}

.image-slider {
  background-color: darkgrey;
  position: relative;
  width: 440px;
  height: 350px;
  right: -710px;
  bottom: 475px;
}

.right {
  z-index: 12;
  position: absolute;
  width: 50px;
  height: 50px;
  font-size: 60px;
  color: lightgrey;
  left: 1145px;
  bottom: -23rem;
  transform: rotate(-90deg);
  transition: all 0.5s ease;
}

.right:hover {
  color: white;
}

.menu-wrapper {
  width: 100VW;
  background-color: #e6ac00;
  height: 3000px;
  position: relative;
  top: -490px;
  clip-path: polygon(0% 0%, 100% 3%, 100% 100%, 0% 100%);
}

.shape-left {
  position: absolute;
  left: 10px;
}

.shape-1 {
  height: 0;
  border-top: 25px solid transparent;
  border-left: 50px solid white;
  border-bottom: 25px solid transparent;
}

.shape-2 {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-right: 50px solid #555;
  border-bottom: 25px solid transparent;
  position: absolute;
  top: 35px;
}

.shape-3 {
  height: 0;
  border-top: 25px solid transparent;
  border-left: 50px solid white;
  border-bottom: 25px solid transparent;
  position: absolute;
  left: 60px;
  top: 0px;
}

.set-2 {
  position: absolute;
  top: 60px;
}

.shape-wrap {
  position: absolute;
  top: 0px;
}

.shape-wrap1 {
  position: absolute;
  top: 250px;
}

.shape-wrap2 {
  position: absolute;
  top: 500px;
}

.shape-wrap3 {
  position: absolute;
  top: 750px;
}

.shape-wrap4 {
  position: absolute;
  top: 1000px;
}

.shape-wrap5 {
  position: absolute;
  top: 1250px;
}

.shape-wrap6 {
  position: absolute;
  top: 1500px;
}

.shape-wrap7 {
  position: absolute;
  top: 1750px;
}

.shape-wrap8 {
  position: absolute;
  top: 2000px;
}

.shape-wrap9 {
  position: absolute;
  top: 2250px;
}

.shape-wrap10 {
  position: absolute;
  top: 2500px;
}

.shape-right {
  position: absolute;
  right: 10px;
  top: 150px;
  transform: rotateY(180deg);
}

.menu-title {
  font-size: 100px;
  margin-left: -550px;
  margin-top: 10px;
}

.pepper {
  position: absolute;
  left: 300px: top: 150px;
}

.underline2 {
  position: relative;
  top: 195px;
  left: 100px;
  width: 0px;
  height: 3px;
  background-color: #339966;
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  transition-timing-function: ease-out;
}

@keyframes line2 {
  from {
    left: 100px;
    width: 0px;
  }
  to {
    left: 140px;
    width: 300px;
  }
}

.col-1 {
  width: 500px;
  position: relative;
  left: 190px;
  top: 220px;
}

.platter {
  font-size: 2rem;
  color: #339966;
  font-family: 'Cedarville Cursive';
  position: relative;
  left: 90px;
  margin-bottom: 45px;
}

.platter-info {
  font-size: 1.15rem;
  text-align: center;
  position: relative;
  left: -140px;
}

.item {
  cursor: pointer;
  font-size: 1.2rem;
  color: black;
  margin: 0;
  padding: 0
}

.price {
  font-family: 'Josefin Sans';
  margin-left: 400px;
  position: relative;
  top: -70px;
  font-size: 1.2rem;
  transition: all 1s ease;
  cursor: pointer;
}

.col-2 {
  position: absolute;
  left: 520px;
  bottom: -40px;
}

.plat-2 {
  left: 150px;
  bottom: 35px;
  border-bottom: 1px solid white;
  width: 150px;
  height: 50px;
}

.plat-3 {
  margin-bottom: 0;
  left: 150px;
  bottom: 85px;
  border-bottom: 1px solid white;
  width: 175px;
  height: 50px;
}

.s1 {
  transition: all 0.5s ease;
  cursor: pointer
}

.col-1-row-2 {
  position: relative;
  bottom: 60px;
}

.plat-4 {
  left: 180px;
}

.info4tacos {
  left: -155px;
}

.plat-info-2 {
  font-size: 1.17rem;
  left: -155px;
}

.plat-5 {
  left: 150px;
  width: 125px;
  height: 50px;
  top: -40px;
  border-bottom: 1px solid white;
}

.col-2-row-3 {
  position: relative;
  bottom: 30px;
}

.col-2-row-4 {
  position: relative;
  bottom: 45px;
}

.plat-6 {
  left: 150px;
  top: -40px;
  border-bottom: 1px solid white;
  width: 120px;
  height: 50px;
}

.plat-7 {
  left: 170px;
  border-bottom: 1px solid white;
  width: 95px;
  height: 50px;
  top: -40px;
}

.col-1-row-3 {
  position: relative;
  bottom: 80px;
}

.plat-8 {
  left: 25px;
}

.info4breakfast {
  left: -150px;
  margin-bottom: 50px;
}

.plat-9 {
  left: 110px;
  top: -40px;
  border-bottom: 1px solid white;
  width: 225px;
  height: 50px;
}

.col-1-row-4 {
  position: relative;
  bottom: 110px;
}

.plat-10 {
  border-bottom: 1px solid white;
  width: 270px;
  height: 50px;
  bottom: 40px;
}

.col-2-row-5 {
  position: relative;
  bottom: 70px;
}

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

<head>
  <meta charset="UTF-8">
  <title>El Metate | Mexican Restaurant</title>
  <link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <script src="https://unpkg.com/scrollreveal"></script>
</head>

<body>
  <header>
    <nav>
      <div class="side-menu">
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Menu</li>
          <li>Contact</li>
          <li>Location</li>
          <li>News</li>
        </ul>
      </div>
      <i class="fas fa-times"></i>
      <div class="menu-bars">
        <div class="b1"></div>
        <div class="b2"></div>
        <div class="b3"></div>
      </div>
    </nav>
    <div class="intro">
      <h1><span class="w1">Authentic</span><span class="w2">Mexican</span><span class="w3">Food</span></h1>

    </div>
  </header>

  <section class="about">
    <div class="about-us">
      <h2 class="h2-about">About Us</h2>
      <div class="underline"></div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat est ab adipisci illo consectetur obcaecati, incidunt, nesciunt ad vitae possimus nam inventore esse impedit. Ullam soluta architecto eligendi sapiente recusandae labore necessitatibus
        quis similique laboriosam quas, nam explicabo numquam commodi magni mollitia itaque hic quaerat earum, nemo optio maiores in.</p>
      <i class="fas fa-caret-down left"></i>
      <div class="image-slider">p</div>
      <i class="fas fa-caret-down right"></i>
    </div>
  </section>

  <section class="menu">
    <div class="menu-wrapper" <h1 class="menu-title">Menu</h1>
      <div class="underline2"></div>
      <div class="col-1">
        <h3 class="platter">Combination Platters</h3>
        <p class="platter-info">Rice & Beans Included</p>

        <p class="item item-1">Tostada & Taco</p><span class="price p1"><span class="s1">$</span>6.39</span>
        <p class="item item-2">2 Beef Tacos</p><span class="price p2"><span class="s1">$</span>6.39</span>
        <p class="item item-3">2 Enchiladas</p><span class="price p3"><span class="s1">$</span>6.39</span>
        <p class="item item-4">Tostada & Enchilada</p><span class="price p4"><span class="s1">$</span>6.39</span>
        <p class="item item-5">Taco & Enchilada</p><span class="price p5"><span class="s1">$</span>6.39</span>
        <p class="item item-6">Burrito & Enchilada</p><span class="price p6"><span class="s1">$</span>6.39</span>
        <p class="item item-7">2 Beef Burritos</p><span class="price p7"><span class="s1">$</span>7.45</span>
        <p class="item item-8">2 Carne Asada Tacos</p><span class="price p8"><span class="s1">$</span>8.09</span>
        <p class="item item-9">Chorizo</p><span class="price p9"><span class="s1">$</span>6.39</span>
        <p class="item item-10">Carne Asada</p><span class="price p10"><span class="s1">$</span>8.19</span>
        <p class="item item-11">Machaca</p><span class="price p11"><span class="s1">$</span>6.75</span>
        <p class="item item-12">Carnitas</p><span class="price p12"><span class="s1">$</span>7.19</span>
        <p class="item item-13">2 Fish Tacos</p><span class="price p13"><span class="s1">$</span>6.75</span>
        <p class="item item-14">Chiles Rellenos</p><span class="price p14"><span class="s1">$</span>6.95</span>
        <p class="item item-15">Red Combo</p><span class="price p15"><span class="s1">$</span>7.95</span>
        <p class="item item-16">Green Combo</p><span class="price p16"><span class="s1">$</span>7.05</span>
        <p class="item item-17">3 Rolled Tacos w/Guacamole</p><span class="price p17"><span class="s1">$</span>6.75</span>
        <p class="item item-18">Chimichanga, Rice & Beans</p><span class="price p18"><span class="s1">$</span>7.05</span>
        <p class="item item-19">Carne Asada Burrito</p><span class="price p19"><span class="s1">$</span>7.19</span>
        <p class="item item-20">2 Tamales, Rice & Beans</p><span class="price p20"><span class="s1">$</span>7.05</span>

        <div class="col-1-row-2">
          <h3 class="platter plat-4">Tacos</h3>
          <p class="platter-info info4tacos">Folded</p>

          <p class="item item-21">1 Chicken Taco</p><span class="price p21"><span class="s1">$</span>2.09</span>
          <p class="item item-22">1 Beef</p><span class="price p22"><span class="s1">$</span>2.09</span>
          <p class="item item-23">1 Carne Asada</p><span class="price p23"><span class="s1">$</span>2.61</span>
          <p class="item item-21">1 Fish</p><span class="price p21"><span class="s1">$</span>2.64</span>
          <p class="item item-22">1 Carnitas</p><span class="price p22"><span class="s1">$</span>2.64</span>
          <p class="item item-23">1 Adobada</p><span class="price p23"><span class="s1">$</span>2.64</span>
          <p class="item item-23">1 Cabeza</p><span class="price p23"><span class="s1">$</span>2.64</span>

          <p class="platter-info plat-info-2">Rolled</p>

          <p class="item item-21">3 Plain with Cheese</p><span class="price p21"><span class="s1">$</span>2.39</span>
          <p class="item item-22">3 Cheese and Guacamole</p><span class="price p22"><span class="s1">$</span>2.89</span>
          <p class="item item-23">3 Chicken w/Cheese and Guacamole</p><span class="price p23"><span class="s1">$</span>2.89</span>
          <p class="item item-21">3 Tacos w/Cheese and Guacamole</p><span class="price p21"><span class="s1">$</span>3.99</span>
          <p class="item item-22">12 Tacos w/Cheese and Guacamole</p><span class="price p22"><span class="s1">$</span>8.99</span>
        </div>

        <div class="col-1-row-3">
          <h3 class="platter plat-7">Tortas</h3>

          <p class="item item-21">Carne Asada</p><span class="price p21"><span class="s1">$</span>2.09</span>
          <p class="item item-22">Machaca</p><span class="price p22"><span class="s1">$</span>2.09</span>
          <p class="item item-23">Ham</p><span class="price p23"><span class="s1">$</span>2.61</span>
          <p class="item item-21">Chorizo</p><span class="price p21"><span class="s1">$</span>2.64</span>
          <p class="item item-22">Chicken</p><span class="price p22"><span class="s1">$</span>2.64</span>
          <p class="item item-23">Carnitas</p><span class="price p23"><span class="s1">$</span>2.64</span>
          <p class="item item-23">Fish</p><span class="price p23"><span class="s1">$</span>2.64</span>
        </div>

        <div class="col-1-row-4">
          <h3 class="platter plat-8">Breakfast Served Everyday</h3>
          <p class="platter-info info4breakfast">6am to 11am</p>

          <h3 class="platter plat-9">Breakfast Plates</h3>

          <p class="item item-21">Huevos Racheros</p><span class="price p21"><span class="s1">$</span>6.29</span>
          <p class="item item-22">Steaks Racheros</p><span class="price p22"><span class="s1">$</span>6.95</span>
          <p class="item item-22">Scrambled Eggs w/Ham</p><span class="price p22"><span class="s1">$</span>5.95</span>
        </div>

        <div class="col-2">
          <h3 class="platter plat-2">Enchiladas</h3>

          <p class="item item-21">2 Cheese</p><span class="price p21"><span class="s1">$</span>4.55</span>
          <p class="item item-22">2 Beef</p><span class="price p22"><span class="s1">$</span>4.65</span>
          <p class="item item-23">2 Chicken</p><span class="price p23"><span class="s1">$</span>3.55</span>

          <h3 class="platter plat-3">Side Orders</h3>

          <p class="item item-24">Carne Asada Fries</p><span class="price p24"><span class="s1">$</span>4.55</span>
          <p class="item item-25">Jalepenos</p><span class="price p25"><span class="s1">$</span>4.65</span>
          <p class="item item-26">Quesadilla</p><span class="price p26"><span class="s1">$</span>3.55</span>
          <p class="item item-27">Ham Quesadilla</p><span class="price p27"><span class="s1">$</span>4.55</span>
          <p class="item item-28">1/2 Pint of Beans</p><span class="price p28"><span class="s1">$</span>4.65</span>
          <p class="item item-29">1/2 Pint of rice</p><span class="price p29"><span class="s1">$</span>3.55</span>
          <p class="item item-30">Ham Quesadilla</p><span class="price p30"><span class="s1">$</span>4.55</span>
          <p class="item item-31">Super Nachos</p><span class="price p31"><span class="s1">$</span>4.65</span>
          <p class="item item-32">1 Tamale</p><span class="price p32"><span class="s1">$</span>3.55</span>
          <p class="item item-33">Extra Cheese Quacamole</p><span class="price p33"><span class="s1">$</span>4.55</span>
          <p class="item item-34">Supreme Quesadilla</p><span class="price p34"><span class="s1">$</span>4.65</span>
          <p class="item item-35">Chips and Quacamole</p><span class="price p35"><span class="s1">$</span>3.55</span>
          <p class="item item-36">1 Chiles Rellano</p><span class="price p36"><span class="s1">$</span>4.55</span>
          <p class="item item-37">Chips & Salsa</p><span class="price p37"><span class="s1">$</span>4.65</span>
          <p class="item item-38">Churros</p><span class="price p38"><span class="s1">$</span>3.55</span>
          <p class="item item-39">Burrito Asada R&B</p><span class="price p39"><span class="s1">$</span>4.55</span>
          <p class="item item-40">1/2 Pint of Beans</p><span class="price p40"><span class="s1">$</span>4.65</span>
          <p class="item item-41">1/2 Pint of rice</p><span class="price p41"><span class="s1">$</span>3.55</span>

          <div class="col-2-row-3">
            <h3 class="platter plat-5">Tostadas</h3>

            <p class="item item-38">Beef</p><span class="price p38"><span class="s1">$</span>2.85</span>
            <p class="item item-39">Chicken</p><span class="price p39"><span class="s1">$</span>2.85</span>
            <p class="item item-40">Bean</p><span class="price p40"><span class="s1">$</span>2.49</span>
          </div>

          <div class="col-2-row-4">
            <h3 class="platter plat-6">Burritos</h3>

            <p class="item item-38">Red Chili</p><span class="price p38"><span class="s1">$</span>4.49</span>
            <p class="item item-39">Carne Asada</p><span class="price p39"><span class="s1">$</span>4.90</span>
            <p class="item item-40">California</p><span class="price p40"><span class="s1">$</span>4.90</span>
            <p class="item item-38">Machaca</p><span class="price p38"><span class="s1">$</span>4.19</span>
            <p class="item item-39">Mixed</p><span class="price p39"><span class="s1">$</span>4.19</span>
            <p class="item item-40">Beef</p><span class="price p40"><span class="s1">$</span>4.19</span>
            <p class="item item-38">Chicken</p><span class="price p38"><span class="s1">$</span>4.19</span>
            <p class="item item-39">Beans</p><span class="price p39"><span class="s1">$</span>1.90</span>
            <p class="item item-40">Fish</p><span class="price p40"><span class="s1">$</span>4.19</span>
            <p class="item item-38">Carnitas</p><span class="price p38"><span class="s1">$</span>4.19</span>
            <p class="item item-39">Chimichanga</p><span class="price p39"><span class="s1">$</span>5.85</span>
            <p class="item item-40">Chile Relleno</p><span class="price p40"><span class="s1">$</span>4.49</span>
            <p class="item item-38">Adobada</p><span class="price p38"><span class="s1">$</span>4.19</span>
            <p class="item item-39">Green Chile</p><span class="price p39"><span class="s1">$</span>4.49</span>
            <p class="item item-40">Shrimp</p><span class="price p40"><span class="s1">$</span>5.65</span>
            <p class="item item-38">Cabeza</p><span class="price p38"><span class="s1">$</span>4.75</span>
            <p class="item item-39">Pollo Asado</p><span class="price p39"><span class="s1">$</span>4.75</span>
          </div>

          <div class="col-2-row-5">
            <h3 class="platter plat-10">Breakfast Burritos</h3>

            <p class="item item-21">Suasage & Egg</p><span class="price p21"><span class="s1">$</span>4.09</span>
            <p class="item item-22">Ham & Eggs</p><span class="price p22"><span class="s1">$</span>4.09</span>
            <p class="item item-22">Bacon & Eggs</p><span class="price p22"><span class="s1">$</span>4.09</span>
            <p class="item item-22">Steak & Chorizon</p><span class="price p22"><span class="s1">$</span>4.75</span>
            <p class="item item-22">Picodegallo eggs & cheese</p><span class="price p22"><span class="s1">$</span>3.95</span>
            <p class="item item-22">Chorizo & Eggs</p><span class="price p22"><span class="s1">$</span>4.85</span>
            <p class="item item-22">Chorizo & Eggs</p><span class="price p22"><span class="s1">$</span>4.09</span>
          </div>
        </div>
  </section>

  <script src="script.js"></script>
</body>

</html>

Answer 1

将所有100vw替换为100％，滚动条消失。 它在您的CSS中出现了3次...