Why does my carousel border on the right
I am using a carousel in my website and it is somehow not line-aligned, but instead borders 40px to the right
I've tried using margin: 0, margin-left: 0, but nothing seems to work.
Also every time it scrolls through the following images it gets thrown out of line for some reason.
Any help?
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>
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;
}
}
+3
source to share