I’m working on an assignment and I’m only allowed to use HTML, CSS & Bootstrap. I started my project and everything went well until I noticed there’s a gap on the right side of my container. Why is this and how can I remove it? Thanks in advance!
HTML:
<!DOCTYPE html>
<html lang="en">
<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">
<title>Tarea Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
<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=Anton&family=Saira+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<div class="container-fluid" style="padding-left: 0; padding-right: 0;">
<!-- Header -->
<header></header>
<nav class="navbar justify-content-center navbar-dark bg-dark">
<div>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a href="/index.html" class="nav-link active bg-secondary text-warning navhome">Home</a>
</li>
<li class="nav-item">
<a href="/care.html" class="nav-link text-white navhowto">Pet Care</a>
</li>
<li class="nav-item">
<a href="/volunt.html" class="nav-link text-white navvolunteer">Volunteer</a>
</li>
<li class="nav-item">
<a href="/adopt.html" class="nav-link text-white navadopt">Adopt an friend!</a>
</li>
<li class="nav-item">
<a href="/donate.html" class="nav-link text-white navpets" ">Donate</a>
</li>
<li class="nav-item">
<a href="/contact.html" class="nav-link text-white navcontact">Contact us</a>
</li>
</ul>
</div>
</nav>
<main>
<div class="row row-cols-1 sec1 box">
<div class="col">
<img class="img-fluid rounded mx-auto mt-5 d-block" src="/img/logo.png">
</div>
</div>
<div class="row row-cols-1 sec2 box" style="width: 100%;">
<div class="col mt-3">
<h1>Who we are:</h1>
</div>
<div class="col mb-5 text-center">
<p>The New Hope Animal Shelter NHAS is a registered charity that has been operating for 150 years. The Society provides care, comfort and compassion to animals in need in communities across the country. It values all animals and advocates to treat them with respect and kindness. The Society strives to keep pets and families together and do so through a variety of community support services, such as sheltering and adoptions, including emergency sheltering, feral cat management programs, animal transfers, food distribution, humane education, animal advocacy, and spay/neuter services. The NHAS does not receive annual government funding and relies on donations to provide programs and services to help animals in need.</p>
</div>
</div>
<div class="row row-cols-1 sec3 box">
<div class="col align-self-center">
<h1>Compassion for animals is intimately connected with goodness of character; and it may be confidently asserted that he who is cruel to animals cannot be a good man.</h1>
<p>-S. Chopenhauer</p>
</div>
</div>
<div class="row row-cols-1 sec4 box">
<div class="col">
<h1>From our Supporters</h1>
</div>
<div id="carouselExampleControls" class="col carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/carousel1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/carousel2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/540518/pexels-photo-540518.jpeg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</main>
<section>
</section>
<footer>
<p></p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
CSS:
html{
height: 100%;
width: 100%;
}
body{
background-color: #116D44;
background-position: center;
}
header{
align-items: center;
}
nav{
font-family: 'Saira Condensed', sans-serif;
}
.box{
width: 100%;
height: 600px;
padding: 40px 60px;
color: white;
font-family: 'Saira Condensed', sans-serif;
text-align: center;
}
.box h1{
font-family: 'Anton', sans-serif;
font-size: 50px;
text-shadow: 0px 0px 5px #000;
}
.box p{
font-size: 25px;
margin-top: 100px;
}
.sec1{
height: 100vh;
background-image: url(/img/indexbg1.jpg);
background-attachment: fixed;
background-size: cover;
}
.sec2{
background: #28689c;
}
.sec3{
height: 100vh;
background-image: url(/img/indexbg2.jpg);
background-attachment: fixed;
background-size: cover;
}
.carousel{
width: 640px;
height: 360px;
margin: 0 auto;
}
.carousel-inner img{
width: 640px;
height: 360px;
}
.sec4{
background: #546C08;
}
In order to remove the gap on the right, I tried to set the "max-width: unset", "overflow-x: hidden; width: 100vw;" on the body, "padding-right: 0; margin-right: 0;" on my .row classes, adding "img-fluid" to the images in my carousel, setting margin, padding and width to 0, 0 & 100vw respectively, setting "box-sizing: border-box;" on my html and "margin: 0;" on the body but to no avail.
>Solution :
Just remove margin-left on the row class.
html {
height: 100%;
width: 100%;
}
body {
background-color: #116D44;
background-position: center;
}
header {
align-items: center;
}
nav {
font-family: 'Saira Condensed', sans-serif;
}
.box {
width: 100%;
height: 600px;
padding: 40px 60px;
color: white;
font-family: 'Saira Condensed', sans-serif;
text-align: center;
}
.box h1 {
font-family: 'Anton', sans-serif;
font-size: 50px;
text-shadow: 0px 0px 5px #000;
}
.box p {
font-size: 25px;
margin-top: 100px;
}
.sec1 {
height: 100vh;
background-image: url(/img/indexbg1.jpg);
background-attachment: fixed;
background-size: cover;
}
.sec2 {
background: #28689c;
}
.sec3 {
height: 100vh;
background-image: url(/img/indexbg2.jpg);
background-attachment: fixed;
background-size: cover;
}
.carousel {
width: 640px;
height: 360px;
margin: 0 auto;
}
.carousel-inner img {
width: 640px;
height: 360px;
}
.sec4 {
background: #546C08;
}
main .row {
margin-left: 0;
}<!DOCTYPE html>
<html lang="en">
<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">
<title>Tarea Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
<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=Anton&family=Saira+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<div class="container-fluid" style="padding-left: 0; padding-right: 0;">
<!-- Header -->
<header></header>
<nav class="navbar justify-content-center navbar-dark bg-dark">
<div>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a href="/index.html" class="nav-link active bg-secondary text-warning navhome">Home</a>
</li>
<li class="nav-item">
<a href="/care.html" class="nav-link text-white navhowto">Pet Care</a>
</li>
<li class="nav-item">
<a href="/volunt.html" class="nav-link text-white navvolunteer">Volunteer</a>
</li>
<li class="nav-item">
<a href="/adopt.html" class="nav-link text-white navadopt">Adopt an friend!</a>
</li>
<li class="nav-item">
<a href="/donate.html" class="nav-link text-white navpets">Donate</a>
</li>
<li class="nav-item">
<a href="/contact.html" class="nav-link text-white navcontact">Contact us</a>
</li>
</ul>
</div>
</nav>
<main>
<div class="row row-cols-1 sec1 box">
<div class="col">
<img class="img-fluid rounded mx-auto mt-5 d-block" src="/img/logo.png">
</div>
</div>
<div class="row row-cols-1 sec2 box" style="width: 100%;">
<div class="col mt-3">
<h1>Who we are:</h1>
</div>
<div class="col mb-5 text-center">
<p>The New Hope Animal Shelter NHAS is a registered charity that has been operating for 150 years. The Society provides care, comfort and compassion to animals in need in communities across the country. It values all animals and advocates to treat
them with respect and kindness. The Society strives to keep pets and families together and do so through a variety of community support services, such as sheltering and adoptions, including emergency sheltering, feral cat management programs,
animal transfers, food distribution, humane education, animal advocacy, and spay/neuter services. The NHAS does not receive annual government funding and relies on donations to provide programs and services to help animals in need.</p>
</div>
</div>
<div class="row row-cols-1 sec3 box">
<div class="col align-self-center">
<h1>Compassion for animals is intimately connected with goodness of character; and it may be confidently asserted that he who is cruel to animals cannot be a good man.</h1>
<p>-S. Chopenhauer</p>
</div>
</div>
<div class="row row-cols-1 sec4 box">
<div class="col">
<h1>From our Supporters</h1>
</div>
<div id="carouselExampleControls" class="col carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/carousel1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/carousel2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/540518/pexels-photo-540518.jpeg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</main>
<section>
</section>
<footer>
<p></p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>