Quando eu tento acessar o site pelo celular, aparece uma parte branca a direita, tem algum jeito de remover isso?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="shortcut icon" href="./imagens/camera-drone.png" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DronesMRBJ</title>
<link rel="stylesheet" href="./css/variables.css">
<link rel="stylesheet" href="./css/styles.css">
<link rel="stylesheet" href="./css/header.css">
<link rel="stylesheet" href="./css/hero.css">
<link rel="stylesheet" href="./css/button.css">
<link rel="stylesheet" href="./css/cards.css">
<link rel="stylesheet" href="./css/title.css">
<link rel="stylesheet" href="./css/responsivo.css">
</head>
<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>Aqzui 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>
<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;
}
a:hover {
color: var(--color-orange);
font-size: 19.5px;
}
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;
}
.btn:hover .carrinho{
animation: carrinho .7s infinite;
}
.active-scroll {
background-color: rgba(52, 76, 124, 0.6);
width: 50%;
}
@keyframes carrinho {
50% {
transform: translateX(3px);
}
100% {
transform: translateX(0);
}
}
@keyframes changeBackgroundImage {
25% {
background-image: url(../imagens/Fundo\ 2.jpg);
transition: .4s;
}
50% {
background-image: url(../imagens/Fundo\ 4.jpg);
transition: .4s;
}
75% {
background-image: url(../imagens/Fundo\ 3.jpg);
transition: .4s;
}
100% {
background-image: url(../imagens/Fundo\ 1.jpg);
transition: .4s;
}
}
Aulas particulares
