When implementing a carousel on my website, I noticed that it's not aligned with the row as expected. Instead, there seems to be a 40px margin to the right.
I've attempted using various margin settings such as margin:0 and margin-left:0, but nothing has seemed to work.
Additionally, every time the carousel scrolls to the next image, it gets thrown out of the row for some unknown reason.
Any suggestions or assistance would be greatly appreciated!
Here is my HTML code:
<div class="container">
<div class="row">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="col-md-4">
<div class="fff">
<div class="thumbnail">
<a href="#"><img src="random img" alt=""></a>
</div>
<div class="caption">
<h4>random caption</h4>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
And here is my CSS code:
img {
max-width: 100%;
}
.thumbnails li > .fff .caption {
background: #fff !important;
padding: 10px
}
ul.thumbnails {
margin-bottom: 0px;
}
.caption h4 {
color: #444;
}
.caption p {
color: #999;
}
li {
list-style-type: none;
}
@media (max-width: 767px) {
.page-header, .control-box {
text-align: center;
}
}
@media (max-width: 479px) {
.caption {
word-break: break-all;
}
}