问删除水平滚动条

EN

*{
      margin: 0;
      box-sizing: border-box;
      padding: 0;
      font-family: 'Roboto', sans-serif;
    
    }
    /*header section*/
    .container{
      display:flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      z-index: 1;
      width: 100vw;
    font-weight: bold;
    text-transform: uppercase;
    
    }
    .logo-box{
      position: relative;
      left:10px;
    }
    .logo{
      width: 100px;
    }
    .main-nav__item{
      list-style-type: none;
      color: white;
    }
    .main-nav__item:hover{
      color: #ff9900;
      cursor: pointer;
    }
    /*84.2*/
    .slideshow-container{
      width: 100vw;
      position: relative;
      margin: auto;
    }
    .img{
      width: 100%;
    height: 98vh;
    }
    .dotz{
      height: 2px;
      text-align: center;
    }
     .dot {
       position: relative;
       top: -30px;
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 20px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }
    
    .active{
      background-color: #ff9900;
    }
    .dot:hover {
      background-color: #ff9900;
    }
    
    /* Fading animation */
    .fade-zz {
      -webkit-animation-name: fade-z;
      -webkit-animation-duration: 1.5s;
      animation-name: fade-z;
      animation-duration: 1.5s;
    }
    
    @keyframes fade-z {
      from {opacity: .4}
      to {opacity: 1}
    }
    /*//////////the end of the header///////////////////*/
    
    
    /* styling icons */
    .icon{
      font-size: 2.5rem;
    }
    .ad{
      margin-left: 80px;
      margin-bottom: 3px
    }
    .rot{
      transform: rotateZ(-33deg);
      margin: 0 0 0.31rem 1.87rem ;
      }
    .op{
      margin-left: 3.12rem;
    }
    .contact-description{
      text-align: center;
      font-weight: bold;
      font-size: 0.81rem;
    }
    /*end styling icons  */
    
    /* contact-box title */
    .contact-title{
      text-align: center;
      font-weight: bold;
      margin-bottom: 0.18rem;
    }
    .contact-box{
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #ff0000;
      height: 180px;
    position: relative;
    top: -6px;
    color: white;
    }
    /* about us section*/
    .title{
      text-align: center;
    }
    .title-description{
      text-align: center;
      color: #ff9900;
      font-weight: bold;
      margin-bottom: 50px;
    }
    .title-description:hover{
      color: black;
    }
    .line{
      position: relative;
      left: 650px;
      width: 50px;
      height: 5px;
      text-align: center;
      background-color: #ff9900;
      border: 0px;
      margin-bottom: 10px;
    }
    /* service section */
    .service-image-box{
    width: 100%;
    height: 50%;
    }
    .service-image{
      width: 100%;
    }
    .title-service{
      font-size: 70px;
      position: relative;
      top: 9rem;
      text-align: center;
      color: white;
    }
    .quality-cuisine-box{
      position: relative;
      top: 10rem;
      height: 0.1px;
      left:19rem;
    width: 1366px;
    }
    .hover:hover{
      color: #ff9900;
    }
    .qu{
      margin-left: 3rem;
      color: white;
    }
    .service-title{
      color: white;
    }
    .service-description{
      color: white;
    }

<div class="container">
        <div class="logo-box">
          <img src="images/logo.png" class="logo" alt="">
        </div>
        <ul class="main-nav__item">
          <li>services</li>
        </ul>
        <ul class="main-nav__item">
          <li>reservation</li>
        </ul>
        <ul class="main-nav__item">
          <li>menu</li>
        </ul>
        <ul class="main-nav__item">
          <li>our chefs</li>
        </ul>
        <ul class="main-nav__item">
          <li>events</li>
        </ul>
      </div>
    
      <!-- Slideshow container -->
      <div class="slideshow-container">
    
        <!-- Full-width images with number and caption text -->
        <div class="mySlides fade-zz">
          <!-- <div class="numbertext">1 / 3</div> -->
          <img src="https://via.placeholder.com/1000" class="img">
          <!-- <div class="text">Caption Text</div> -->
        </div>
    
        <div class="mySlides fade-zz">
          <!-- <div class="numbertext">2 / 3</div> -->
          <img src="https://via.placeholder.com/1000" class="img">
          <!-- <div class="text">Caption Two</div> -->
        </div>
    
        <div class="mySlides fade-zz">
          <!-- <div class="numbertext">3/3</div> -->
          <img src="https://via.placeholder.com/1000" class="img">
          <!-- <div class="text">Caption Three</div> -->
        </div>
    
    
        <!-- The dots/circles -->
        <div class="dotz">
          <span class="dot" onclick="currentSlide(1)"></span>
          <span class="dot" onclick="currentSlide(2)"></span>
          <span class="dot" onclick="currentSlide(3)"></span>
        </div>
    
        <!--end of the slideshow-->
    
        <!--contact box-->
        <div class="contact-box">
          <div class="adress">
            <i class="fas fa-map-marker-alt icon ad"></i>
            <h3 class="contact-title">Address</h3>
            <p class="contact-description">4579 Penn Street,Manchester<br>united kingdom</p>
          </div>
          <div class="phone">
            <i class="fas fa-phone-volume icon rot"></i>
            <h3 class="contact-title">Phone</h3>
            <p class="contact-description">636-399-9776 <br> 573-225-7350</p>
          </div>
          <div class="opening-time">
            <i class="far fa-clock icon op"></i>
            <h3 class="contact-title">Opening time</h3>
            <p class="contact-description">all the days of the week <br>from 6 am to midnight</p>
          </div>
        </div>
        <!-- about us section -->
        <section class="about-us">
      </div>
      <i class="fas fa-utensils"></i>
      <h1 class="title">about us</h1>
      <hr class="line">
      <p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page <br>avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années<br> 1500, quand un imprimeur
        anonyme assembla </p>
      </section>
      <!-- service section -->
      <section class="services">
        <h1 class="title-service">
          services
        </h1>
        <div class="quality-cuisine-box">
          <i class="fas fa-concierge-bell icon qu"></i>
          <h2 class="service-title">quality cuisine</h2>
          <p class="service-description">Le Lorem Ipsum est <br>
             simplement du faux
          </p>
        </div>
        <!-- <div class="freindly-staff-box">
          <i class="fas fa-smile-beam icon"></i>
          <h2>freindly staff</h2>
          <p>Le Lorem Ipsum est <br>
             simplement du faux</p>
        </div>
           <div class="fresh-food-box">
             <i class="fas fa-fish icon"></i>
             <h2>fresh food</h2>
             <p>Le Lorem Ipsum est <br>
                simplement du faux</p>
           </div> -->
        <div class="service-image-box">
          <img class="service-image" src="https://via.placeholder.com/1000" alt="">
        </div>
      </section>