The trick with CSS layout usually is in understanding the box model.
Your footer is a box and you want it to have the width of your page, but your footer is inside another box, your wrapper, and your wrapper has a defined width.
You need to put your footer outside your wrapper so it normally fills the width of your page.
If you want your footer to has the same width of your wrapper but the background extend from side to side, you can end your wrapper, add a div for your bg footer color and inside place your centered footer with a fixed width.
Am I making any sense?