Currently, I'm tackling a project using only HTML, CSS, and Bootstrap. Things were going smoothly until I stumbled upon an unexpected gap on the right side of my container. I'm puzzled as to why this is happening and how I can go about rectifying it. Any help or suggestions would be greatly appreciated!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div class="container-fluid" style="padding-left: 0; padding-right: 0;">
...
</div>
</body>
</html>
CSS:
html{
...
}
body{
...
}
header{
...
}
nav{
...
}
.box{
...
}
.box h1{
...
}
.box p{
...
}
.sec1{
...
}
.sec2{
...
}
.sec3{
...
}
.carousel{
...
}
.carousel-inner img{
...
}
.sec4{
...
}
To eliminate the gap on the right side of the container, I experimented with various approaches such as adjusting the max-width and overflow properties, manipulating padding and margins, tweaking image sizes, and playing with box-sizing. Unfortunately, none of these attempts have yielded the desired result so far.