How to give footer background color for the whole width of the browser with fixed parent div

How to give footer background color for the whole width of the browser
with fixed parent div

I am working on Bootstrap theme where its responsive. I disable the
responsiveness on a child theme by adding a code in functions.php. All
works well , no problem.
Now the parent container, is now fixed: HTML:
<div class="container">
CSS:
.container{width: 940px;}
But I would like the footer section to have sitewide background color. How
do I able to do this?
I have tried setting different methods like width:auto, width: 200% ,but
its not giving me the desired result.
Supposing this is the footer section:
<footer>
My footer
</foote>
My attempted CSS on a child theme(not working)
footer {
background: #CCCCCC;
width:100% !important;
position:absolute !important;
}
Also is this possible without setting too many !important on CSS property?
Thanks.