How can I have the gradient background of #section2 to be fullwidth (to fill the viewport in width)?
I use bootstrap and I would like to respect these constraints:
- no javascript
- not removing container class from <main>
- not adding horizontal scrolling (the background should not be wider than the viewport, even when a vertical scrollbar appears)
Maybe, is there a way to compensate the margins introduced by container and section?
body * {
border: 1px solid black;
}
section {
height: 100px;
}
#section2 {
color: white;
background: linear-gradient(180deg, blue 0%, white 100%);
}<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<header>header</header>
<main class="container">
<section>section 1</section>
<section id="section2">section 2</section>
<section>section 3</section>
</main>
<footer>footer</footer>
</body>
</html>
