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;
}
}