Olá, tenho um body com 1200 px para centralizar a pagina, porem quero que meu footer seja maior que 1200 porque ele vai ter um background diferente que vai pegar de uma ponta a outra. Como posso fazer isso? usei um width no footer de 100 vw, porem o navegador cria uma barra de rolagem pra esquerda.
CSS
*{
margin: 0;
padding: 0;
}
body{
max-width: 1200px;
margin: 0 auto;
}
header{
}
.container{
display: flex;
justify-content: space-between;
align-items: center;
}
.header_nav{
display: flex;
justify-content: space-around;
}
.header_nav a{
margin-left: 20px;
text-decoration: none;
border: 1px solid black;
padding: 0.32em;
}
.sobre{
display: grid;
grid-template-columns: 1fr 1fr;
margin: 20px 0;
}
.para-todos{
margin-right: 10px;
}
.img1{
display: grid;
grid-template-columns: 1fr 1fr;
}
.img1 .flor{
max-width: 590px;
}
.img1 .folha{
max-width: 590px;
}
.img3{
display: flex;
justify-content: space-between;
}
.img3 img{
max-width: 300px;
}
footer{
display: flex;
padding: 30px;
width: 100vw;
margin-top: 30px;
background-color: red;
justify-content: center;
}
footer p{
margin-left: -30px;
}HTML
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css\style.css">
<link rel="stylesheet" href="css\style-responsive.css">
<title>Display</title>
</head>
<body>
<header>
<div class="container">
<h1>
<a href="">Logo</a>
</h1>
<nav class="header_nav">
<a href="">Home</a>
<a href="">Quem somos</a>
<a href="">Serviços</a>
<a href="">Contato</a>
</nav>
</div>
</header>
<section class="sobre">
<div class="para-todos">
<h1>Para todos</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div>
<h1>Sendo todos</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
<section class="img1">
<img src="img/flowers-g528d6e865_1920.jpg" alt="" class="flor">
<img src="img/leaves-gc44114865_1920.jpg" alt="" class="folha">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC</p>
</section>
<section class="sobre">
<div class="para-todos">
<h1>Para todos</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</p>
</div>
<div>
<h1>Sendo todos</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been</p>
</div>
</section>
<article class="img3">
<img src="img/flowers-g528d6e865_1920.jpg" alt="">
<img src="img/leaves-gc44114865_1920.jpg" alt="">
<img src="img/castle-g52030eb28_1920.jpg" alt="">
</article>
<footer>
<p>Desenvolvido por MarcãoDevv</p>
</footer>
</body>
</html>