I'm currently utilizing the bootstrap framework to craft a responsive website. However, I've encountered an issue with a persistent horizontal bar at the bottom of the page that I can't seem to remove. After researching similar queries on stackoverflow, it appears many others faced problems with their footers. Upon checking my own code, I noticed I had yet to define a footer and didn't specify a width of 100%. The CSS styles I applied also failed to modify the dimensions of the bootstrap elements. Can anyone help me identify what's causing this in my HTML code?
Here is a snippet of my stylesheet (utilizing the carousel provided by bootstrap and a section id for content modification at the bottom):
CSS
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
#section {
padding-left: 5%;
}
HTML
<div id="container">
<!--Slideshow-->
<div class="jumbotron" style="background:transparent !important;">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>;
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Images/Swimming.jpg" alt="1" style="width:460px; height:345px">
<div class="carousel-caption">
<h3>Swimming</h3>
<p>Event of Swimming</p>
</div>
</div>;
[...]
To see a screenshot of my website displaying the troubling horizontal bar, click below: https://i.sstatic.net/vVx7p.jpg
Your assistance in troubleshooting this matter would be greatly appreciated.