twitter bootstrap carousel size

Question

I'm creating a website for my dad using Twitter Bootstrap, it's done except for one thing: I can't figure out how to:
- reduce the carousel width
- center the carousel
- make scroll arrows still on image

here is the website so you can check the source

I've literally gone line by line through the css and adjusted every aspect of the carousel and then checked it in my browser.

Another point of confusion is that some of these adjustments have an effect if i test it in my browser with SHIFT+CTRL+R (so notepad++ opens it in google chrome directly from my desktop w/o using a server or host) and have seen some awkward changes, yet none of these changes carry over when I place them on the server.

I've seen some other posts suggesting adjustments to .carousel and @image and have tried those without success as well.

Answer 1

You can just set the width of the carousel using CSS. Centering a block element is done with margin: 0 auto. Only change the CSS of .carousel, the rest is automatically styled correctly.

<div id="myCarousel" class="carousel slide" style="width: 400px; margin: 0 auto">
    ...
</div>

Check out this jsfiddle to see it work.