Pb images centrée : Caroufredsel

Bonsoir à tous et à toutes,
J'ai suivis le tuto de Grafikart sur caroufredsel qui est un super ( vraiment super ;) ) carrousel. Mais j'ai un petit problème ^^ tout d'abord voici mes codes :

HTML :

<div class="image_carousel">
        <div id="foo2">
            <img src="http://placehold.it/890x250" width="890" height="250" />
            <img src="http://placehold.it/890x250" width="890" height="250" />
            <img src="http://placehold.it/890x250" width="890" height="250" />
            <img src="http://placehold.it/890x250" width="890" height="250" />
            <img src="http://placehold.it/890x250" width="890" height="250" />
            </div>
    <div class="clearfix"></div>
    <a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
    <a class="next" id="foo2_next" href="#"><span>next</span></a>
    <div class="pagination" id="foo2_pag"></div>
</div>

CSS:

.image_carousel {
    margin:auto;
    padding: 15px 0 15px 40px;
    position: relative;
    width:960px;
    height:300px;
    background-color:rgba(0,0,0,0.8);
}
.image_carousel img {
    border: 1px solid #ccc;
    background-color: white;
    padding: 9px;
    margin: 7px;
    display: block;
    float:left;
}
a.prev, a.next {
    background: url(miscellaneous_sprite.png) no-repeat transparent;
    width: 45px;
    height: 50px;
    display: block;
    position: absolute;
    top: 85px;
}
a.prev { left: -22px;
                    background-position: 0 0; }
a.prev:hover { background-position: 0 -50px; }
a.prev.disabled {   background-position: 0 -100px !important; }
a.next { right: -22px;
                    background-position: -50px 0; }
a.next:hover { background-position: -50px -50px; }
a.next.disabled {   background-position: -50px -100px !important; }
a.prev.disabled, a.next.disabled {
    cursor: default;
}
a.prev span, a.next span {
    display: none;
}
.pagination {
    text-align: center;
}
.pagination a {
    background: url(miscellaneous_sprite.png) 0 -300px no-repeat transparent;
    width: 15px;
    height: 15px;
    margin: 0 5px 0 0;
    display: inline-block;
}
.pagination a.selected {
    background-position: -25px -300px;
    cursor: default;
}
.pagination a span {
    display: none;
}
.clearfix {
    float: none;
    clear: both;
}
.center {
    text-align:center;
    margin:auto;
}

Et enfin jQuery :

$("#foo2").carouFredSel({
    width:960,
    circular:false,
    direction : 'left',
    prev : {   
        button : "#foo2_prev",
        key : "left"
    },
    next : {
        button : "#foo2_next",
        key : "right"
    },
    pagination : "#foo2_pag"
});

Comme vous pouvez le voir j'ai piqué le code source sur l'exemple de http://caroufredsel.frebsite.nl/ ^^
J'ai donc mon image de 890*250 qui défile mais elle n'est pas centrée alors que en "direction : 'up'," elle est tout à fait centrée ! Je me demandais ou est-ce qu'il faut mettre la/les balise(s) CSS pour que mes images soit centrées.
Si quelqu'un a une réponse je serais ravis de l'entendre ;) /la lire en l'occurrence :D /
Merci d'avance et bonne soirée

PS : j'ai hésiter a mettre le post dans CSS mais je l'es mit dans jQuery, en espérant ne m'être pas trompé :)