Need footer background to stretch the length of the page
I am playing around with re-designing my site and am doing it using Skeleton as I wan to know how frameworks function and see if they are something I want to use in the future to cut down on my coding time. I am trying to get the footer background to stretch the length of the page but it seems to be confined to the page container. When I try to override that, it is not working. Something is not correct in my code. I do see in the inspector for Chrome that footer.footer.container is 960px, but when I try to override that it doesn't work. That is why I am saying something is not right with my code. I tried to have the entire page container at 100% but that shoves the header and content to the left and I am not sure how to get it back to the middle of the page.
The site is at http://foxdenwebsolutions.com/foxden3/index.html.
Many of you may not like frameworks but I am just learning how to use them. I am not sure yet if they are worth it. I intend to try using Gumby, cssgrid v2, amazium, bootstrap, and semantic.
Also haven't really touched the responsive side too much. I know that the main background and the content backgrounds will have to go so that smaller devices are not getting the bandwidth hit!