Quando eu tento acessar o site pelo celular, aparece uma parte branca a direita, tem algum jeito de remover isso?
<body>
<div class="header">
<nav>
<ul>
<li><a href="#container1">Home</a></li>
<li><a href="#container2">Drones</a></li>
<li><a href="#container3">Últimos lançamentos</a></li>
<li><a href="#container4">Peças</a></li>
<li><a href="#container5">Promoções</a></li>
<li><a href="#container6">Contato</a></li>
</ul>
</nav>
<h1>Drones|MRBJ</h1>
</div>
<div class="container bg-image-1 hero" id="container1">
<h2>Procurando um drone?</h2>
<h3>Aqui temos os melhores! Confira já nossos modelos!</h3>
</div>
<div class="container-card bg-color-1" id="container2">
<div class="card-itemtitulo title">
<h4>Drones</h4>
</div>
<div class="card-item2">
<h4>DJI Avata</h4>
<img src="./imagens/Drone 10.png" alt="Imagem do DJI Avata">
</div>
<div class="card-item">
<h4> Descrição </h4>
<h5> Voo imersivo e intuitivo, ágil, compacto, protetores de hélices integrados, nitidez de gravação, captura suave, sistema GPS e gravações em até 4K.</h5>
<h6>R$7.000,00 ou 12x de R$583,33 sem juros </h6>
<h6>R$6.650,00 com PIX (-5%)</h6>
<a href="#container2" class="btn">Comprar
<i class="fa-solid fa-cart-shopping carrinho" style="color: #8ab9ff;"></i></a>
</div>
<div class="card-item2">
<h4> Dji Mini 2 SE </h4>
<img src="./imagens/Drone 9.png" alt="Imagem do Dji Mini 2 SE">
</div>
<div class="card-item">
<div class="card-item2">
<h4>Dji Air 2S Fly More Combo</h4>
<img src="./imagens/Promoção 2.png" alt="Imagem do Dji Air 2S Fly More Combo">
</div>
<div class="card-item">
<h4> Descrição </h4>
<h5> Ideal para fotográfia áerea em movimento, mais de um bilhão de cores, tira fotos em formato RAW e sistema de segurança AirSense.</h5>
<h6> De R$16.000,00 por R$13.600,00 (-15%) ou ainda 12x de R$1.133,00 sem juros </h6>
<h6>R$12.920,00 com PIX (-5%)</h6>
<a href="#container5" class="btn">Comprar
<i class="fa-solid fa-cart-shopping carrinho" style="color: #8ab9ff;"></i></a>
</div>
<div class="card-item2">
<h4>Dji Tello Boost Combo</h4>
<img src="./imagens/Promoção 3.png" alt="Imagem do Dji Tello Boost Combo">
</div>
<div class="card-item">
<h4> Descrição </h4>
<h5> Resolução de vídeo em 720p e fotos em 5MP, velocidade máxima de 8 m/s, altitude máxima de 100 metros e autonomia de voo por até 13 minutos.</h5>
<h6> De R$1.000,00 por R$700,00 (-30%) ou ainda 12x de R$58,33 sem juros </h6>
<h6>R$665,00 com PIX (-5%)</h6>
<a href="#container5" class="btn">Comprar
<i class="fa-solid fa-cart-shopping carrinho" style="color: #8ab9ff;"></i></a>
</div>
</div>
</div>
<div class="container bg-color-5" id="container6">
<div class="card-itemtitulo title2">
<h4>Contato</h4>
</div>
<div class="card-item3">
<a href="#container6" class="btn2">
<i class="fa-brands fa-whatsapp fa-2xl" style="color: #8cff00;"></i></a>
<h4>(+55) 11 98040-8875</h4>
</div>
<div class="card-item3">
<a href="#container6" class="btn2">
<i class="fa-solid fa-phone fa-2xl" style="color: #000000;"></i></a>
<h4>(+55) 11 96347-9786</h4>
</div>
<div class="card-item3">
<a href="#container6" class="btn2">
<i class="fa-solid fa-envelope fa-2xl" style="color: #ffffff;"></i></a>
<h4>Dronesmrbj@gmail.com</h4>
</div>
<div class="card-item3">
<a href="#container6" class="btn2">
<i class="fa-brands fa-twitter fa-2xl" style="color: #71a5fe;"></i></a>
<h4>@DronesMRBJ</h4>
</div>
</div>
<script src="./js/scroll.js"></script>
</body>
</html>
CSS agora:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
}
html {
scroll-behavior: smooth;
max-width: 100%;
}
img {
height: 250px;
width: auto;
}
a {
color: var(--color-light);
text-decoration: none;
font-size: 18px;
font-weight: 700;
transition: .7s;
}
h4 {
color: var(--color-light);
font-size: 22px;
font-weight: 700;
text-align: center;
}
h5 {
color: var(--color-light);
font-size: 16px;
font-weight: bold;
text-align: justify;
}
h6 {
color: var(--color-light);
font-size: 16px;
font-weight: 400;
}
body { overflow-x: hidden; }
.container {
width: 100vh;
height: 101vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: scroll;
}
.bg-image-1 {
background-image: url(../imagens/Fundo\ 1.jpg);
transition: .4s;
animation: changeBackgroundImage 16s infinite;
}
.bg-color-1 {
background-color: var(--color-blue);
}
.bg-color-2 {
background-color: var(--color-blue);
}
.bg-color-3 {
background-color: var(--color-blue);
}
.bg-color-4 {
background-color: var(--color-blue);
}
.bg-color-5 {
background-color: var(--color-blue);
}
.carrinho {
font-size: 16px;
margin-left: 5px;