I noticed that there seems to be some extra space on the right side of the layout. I'm not sure how to adjust the Bootstrap code or CSS to fix this issue, or if I need to apply margin 0 or padding 0 somewhere in the code.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
width: auto;
}
body {
margin: 0;
padding: 0;
}
.navbar-nav {
font-weight: lighter;
margin: 0;
}
.card-text {
color: #707070;
}
.card-img-top {
height: 500px;
object-fit: cover;
}
#form_title {
text-align: center;
padding-bottom: 15px;
}
#form_button {
text-align: center;
}
b {
font-weight: bold;
}
footer {
background-color: #28a745;
color: #fff;
padding: 40px;
width: 100%;
box-sizing: border-box;
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta viewport="width=device-width, initial-scale=1.0">
<title>CUPPON</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1a0918285d465b465a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<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=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./assets/CSS/style.css">
<link rel="icon" type="image/png" href="assets/img/favicon.png">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<div class="container-fluid">
<a class="navbar-brand" href="#">CUPPON</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="assets/img/plumón.jpg" class="card-img-top" alt="Plumón de cama">
<div class="card-body">
<h5 class="card-title">Plumón Coral Fleece estampado en modelo y tamaño a elección</h5>
<p class="card-text">Plumones Manolino<br><i class="fa-solid fa-location-dot"></i>
9191 Avenida Vitacura, Chile</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">$45.990</small>
<b>$20.000</b>
</div>
</div>
</div>
... (Card details continue)
</div>
<footer>
<form>
<h5 id="form_title">Recibe cupones en tu correo</h5>
<div class="mb-3">
<input type="text" class="form-control" id="exampleInputText1" aria-describedby="nameHelp">
</div>
<div class="mb-3">
<input type="email" class="form-control" id="exampleInputEmail1">
</div>
<div id="form_button">
<button class="btn btn-primary" type="submit">Enviar</button>
</div>
</form>
</footer>
<script src="https://kit.fontawesome.com/e186ec11fa.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="791b16160d0a0d0b1809394c574a574b">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous">
</script>
</body>
</html>After trying to set margin 0 and padding 0 in the body without success, I would appreciate any guidance on fixing my code.