Center This CarouFredSel Carousel

Question

I am using the jQuery CarouFredSel plugin for my carousel and I am trying to center it. I have tried to apply margin:0 auto; to the head carousel tag #c-carousel but nothing happened. I think it might be because I did not specify a width, however when I do specify a width part of the carousel becomes cut off.

What I'm trying to do with my carousel is similar to the carousel located on Blizzard's homepage where the carousel will rotate through a bunch of images with links, but will not cause the horizontal scroll bars to appear if the browser is narrower then the carousel content.

Code:

<div id="c-carousel">
    <div id="wrapper">
        <div class="caroufredsel_wrapper">
            <div id="carousel">
                <div class="slide">
                    <img src="http://www.placehold.it/1200x650/ff0000/999999">
                    <div class="content"><a href="">link</a></div>
                </div>
                <div class="slide">
                    <img src="http://www.placehold.it/1200x650/00ff00/999999">
                    <div class="content"><a href="">link</a></div>
                </div>
                <div class="slide">
                    <img src="http://www.placehold.it/1200x650/0000ff/999999">
                    <div class="content"><a href="">link</a></div>
                </div>
                <div class="slide">
                    <img src="http://www.placehold.it/1200x650/f0f0ff/999999">
                    <div class="content"><a href="">link</a></div>
                </div>
            </div>
        </div>
    </div>
    <div id="pager">
        <a href="http://coolcarousels.frebsite.nl/c/18/#" class="selected"><span>1</span></a>
        <a href="http://coolcarousels.frebsite.nl/c/18/#" class=""><span>2</span></a>
        <a href="http://coolcarousels.frebsite.nl/c/18/#" class=""><span>3</span></a>
        <a href="http://coolcarousels.frebsite.nl/c/18/#" class=""><span>4</span></a>
    </div>
</div>
<div id="content">
    content
</div>

$(function() {
    $('#carousel').carouFredSel({
        scroll: {
            fx: 'crossfade',
            duration: 1000
        },
        pagination: {
            container: '#pager',
            duration: 500
        }
    });
});


#c-carousel {
    height: 100%;
    padding: 0;
    margin: 0 auto;
    min-height: 600px;
    min-width: 960px;
    text-align: center;
}
#wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}
.caroufredsel_wrapper {
    width: 100% !important;
    height: 100% !important;
}
#carousel .slide {
    width:1200px;
    height:650px;
    overflow: hidden;
    float: left;
    padding-right: 10000px;
}
#carousel .slide .content {
    font-size: 55pt;
    position: relative;
    top: -300px;
    left: 100px;
    z-index: 5;
}
#carousel .slide img {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
}

#pager {
    position: relative;
    top: -250px;
    z-index: 10;
    display: block;
}
#pager a {
    background-color: #356;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 6px;
    border-radius: 10px;
    box-shadow: 0 1px 1px #cef;
}
#pager a.selected {
    background-color: #134;
}
#pager a span {
    display: none;
}

#content {
    background: yellow;
    width: 960px;
    height: 500px;
    position: relative;
    margin: 0 auto;
    z-index: 20px;
    top: -200px;
    font-size: 80pt;
}

Answer 1

Check your code adjusted here: http://jsfiddle.net/7Esrm/

add to #c-carousel the property:

width:960px;

and remove min-width. This will make margin work.

add this CSS:

body {overflow-x:hidden}

this will make the page ignore if the content on x axis is bigger then the view port and will not display a horizontal scroll bar.