垂直スクロールを削除するには？

Question

レスポンシブな背景イメージでレスポンスレイアウトを作成しようとしましたが、スクロールを取り除くことはできません。試しましたoverflow:hiddenと異なる背景のプロパティ。

<div class="wrap"> 
    <div class="header"> 
     <div class="logo-container"> 
      <a href="#"></a> 
     </div> 
     <div class="nav-container"> 
      <ul> 
       <li> 
        <span> 
         <img src="svg-icons/about-service.svg" alt=""> 
         <a href="#">О сервисе BuyNow</a> 
        </span> 
       </li> 
       <li> 
        <span> 
         <img src="svg-icons/virt-cards.svg" alt=""> 
         <a href="#">Виртуальные дисконтные карты</a> 
        </span> 
       </li> 
       <li> 
        <span> 
         <img src="svg-icons/buy-now-pay-later.svg" alt=""> 
         <a href="#">Покупай сейчас, плати потом</a> 
        </span> 
       </li> 
      </ul> 
     </div> 
     <div class="stores-container"> 
      <a href="#" class="btn-app-store">     
      </a> 
      <a href="#" class="btn-google-play"></a> 
     </div> 
    </div>  
</div> 

<div class="content"> 
    <div class="bg-content"> 
     <div class="content-wrap"> 
      <div class="content-left"> 
       <div class="content-title"> 
        <h1>Buy Now</h1> 
       </div> 
       <div class="description"> 
        <span>Сервис интеллектуальных покупок</span> 
       </div> 
       <div class="divider-container"> 
        <div class="divider-long"></div> 
        <div class="divider-short"></div> 
       </div> 
       <ul> 
        <li> 
         <img src="svg-icons/round-icon-no-ads-white.svg" width="50" height="50" alt=""> 
         <span>Предоставляет выгодные предложения от множества магазинов, учитывая ваши предпочтения</span> 
        </li> 
        <li> 
         <img src="svg-icons/round-icon-wallet-white.svg" width="50" height="50" alt=""> 
         <span>Дает возможность <a href="#">отложить оплату</a></span> 
        </li> 
        <li> 
         <img src="svg-icons/round-icon-profitable-offers-white.svg" width="50" height="50" alt=""> 
         <span>Не раздражает рекламой</span> 
        </li> 
       </ul> 
      </div> 
      <div class="content-right"> 
       <img src="img/phone.png" width="226" height="460" alt=""> 
      </div> 
     </div> 
    </div> 
</div> 


<div> 
    <div class='container'> 
     <span class='pulse-button'> 
      <img src="img/orange-arrow-right.png" width="9" height="13" alt=""> 
     </span> 
    </div> 
</div> 


<footer> 
    <div class="footer"> 
     <div class="copyright"> 
      <span>&#9400; BuyNow, 2016. Все права защищены</span> 
     </div> 
     <div class="partners"> 
      <img src="img/bag.png" alt=""> 
      <a href="#">Для партнёров</a> 
     </div> 
    </div> 
</footer> 

CSS：ラップ、コンテンツとフッター：

html { 
overflow-x: hidden; } 
.wrap { 
margin: 0 auto; 
max-width: 1024px; } 
/* HEADER */ 
.header { 
max-width: 1024px; 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
padding: 19px 20px; } 
@media (max-width: 767px) { 
.header { 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
     -ms-flex-direction: column; 
      flex-direction: column; } } 
@media (max-width: 767px) { 
.header .logo-container { 
    margin: 0 auto 10px; } } 
.header .logo-container a { 
display: block; 
width: 41px; 
height: 41px; 
background: url("../svg-icons/logo.svg"); 
background-size: 41px 41px; } 
.header .logo-container a:hover { 
    opacity: .5; 
    -webkit-transition: .3s ease-out; 
    transition: .3s ease-out; } 
.header .nav-container ul { 
margin-left: 1px; 
margin-top: 0px; } 
.header .nav-container ul li { 
    float: left; 
    margin-right: 15px; } 
    @media (max-width: 767px) { 
    .header .nav-container ul li { 
     margin-bottom: 10px; } } 
    .header .nav-container ul li span img { 
    float: left; 
    margin-right: 4px; 
    opacity: .5; } 
    @media (max-width: 767px) { 
     .header .nav-container ul li span img { 
     margin-right: 10px; } } 
    .header .nav-container ul li span a { 
    font-size: 14px; 
    line-height: 20px; 
    color: #000; } 
    .header .nav-container ul li span a:hover { 
     color: #fc7622; 
     -webkit-transition: .3s ease-out; 
     transition: .3s ease-out; } 
.header .nav-container ul li:nth-child(1) { 
    width: 130px; } 
    @media (max-width: 767px) { 
    .header .nav-container ul li:nth-child(1) { 
     width: 100%; } } 
.header .nav-container ul li:nth-child(2) { 
    width: 194px; } 
    @media (max-width: 767px) { 
    .header .nav-container ul li:nth-child(2) { 
     width: 100%; } } 
.header .nav-container ul li:nth-child(3) { 
    width: 170px; } 
    @media (max-width: 767px) { 
    .header .nav-container ul li:nth-child(3) { 
     width: 100%; } } 
    @media (min-width: 401px) and (max-width: 768px) { 
    .header .nav-container ul li:nth-child(3) { 
     width: 270px; 
     margin-top: 10px; 
     margin-left: 30px; } } 
    .header .nav-container ul li:nth-child(3) span img { 
    margin-right: 9px; } 
    .header .stores-container { 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-pack: justify; 
-webkit-justify-content: space-between; 
    -ms-flex-pack: justify; 
     justify-content: space-between; 
margin-left: 71px; } 
@media (max-width: 767px) { 
    .header .stores-container { 
    margin-left: 0px; } } 
@media (min-width: 769px) and (max-width: 1024px) { 
    .header .stores-container { 
    margin-left: 55px; } } 
@media (min-width: 401px) and (max-width: 768px) { 
    .header .stores-container { 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
     -ms-flex-direction: column; 
      flex-direction: column; } } 
.header .stores-container .btn-app-store { 
    display: block; 
    width: 136px; 
    height: 40px; 
    margin-right: 20px; 
    background: url("../svg-icons/app-store.svg"); 
    background-size: 136px 40px; } 
    .header .stores-container .btn-app-store:hover { 
    opacity: .5; 
    -webkit-transition: .3s ease-out; 
    transition: .3s ease-out; } 
.header .stores-container .btn-google-play { 
    display: block; 
    width: 136px; 
    height: 40px; 
    background: url("../svg-icons/google-play.svg"); 
    background-size: 136px 40px; } 
    .header .stores-container .btn-google-play:hover { 
    opacity: .5; 
    -webkit-transition: .3s ease-out; 
    transition: .3s ease-out; } 

/* FOOTER */ 
footer .footer { 
max-width: 1024px; 
height: 40px; 
margin: 0 auto; 
display: -webkit-box; 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-pack: justify; 
-webkit-justify-content: space-between; 
    -ms-flex-pack: justify; 
     justify-content: space-between; } 
@media (max-width: 767px) { 
footer .footer { 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
     -ms-flex-direction: column; 
      flex-direction: column; 
    text-align: center; } } 
@media (max-width: 767px) { 
footer .footer .copyright { 
    margin: 10px auto; } } 
footer .footer .copyright span { 
margin-left: 18px; 
padding-top: 12px; 
display: block; 
font-size: 12px; } 
@media (max-width: 767px) { 
    footer .footer .copyright span { 
    margin: 10px auto; } } 
@media (max-width: 767px) { 
footer .footer .partners { 
    margin: 10px auto; } } 
footer .footer .partners img { 
margin-left: -33px; 
margin-top: 13px; } 
footer .footer .partners a { 
font-size: 15px; 
color: #000; } 
footer .footer .partners a:hover { 
    text-decoration: none; } 

三つのブロックがあります。かなりシンプルですが、スクロールの理由は何か分かりません。今私のページは次のようになります：https://buzzer-maze.codio.io/

Answer 1

体内で特定のオーバーフローを隠すようにしてください。

body{ 
 
    padding:0px; 
 
    overflow-y: hidden; 
 
    overflow-x: hidden; 
 
}