CODEWITHSUNDEEP
htmlcsscarouselbootstrap-4
aiden87
aiden87

Reputation: 969

why is my carousel margined to right

Im using carousel on my website, and it's somehow not aligned with row, but is instead margined like 40px to the right

I've tried using margin:0, margin-left:0, but nothing works.

Also everytime it scrolls through next images, it gets thrown out of a row 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;
}
}

Upvotes: 3

Views: 45

Answers (2)

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

Add this CSS Rule:

ul.thumbnails {
  padding:0;
}

hope this helps...

Upvotes: 1

Ehsan
Ehsan

Reputation: 12959

Use :

body {
  margin:0;
}

.thumbnails {
  padding: 0;
}

Upvotes: 1

Related Questions