Shr.Khr on "Why is CSS change ruining responsive layout?"

Hi all
My test site can be found here.

I made some CSS changes in the footer to make the three columns in the footer (Main Menu, Recent Posts, Recent Comments) occupy the entire available width.

Below are the CSS rules that I added:

#pages-2 {
    width: 31.9165%;
}
#recent-posts-3 {
    width: 31.9165%;
}
#recent-comments-3 {
    width: 31.9165%;
}

(I had to use ID in the CSS because changing classes affects the widgets in the sidebars as well.)

Now, after I add the styles above, everything appears fine.
However, when I test the site using the Firefox Web Developer toolbar > Resize > View Responsive Layout, I find that the footer widgets are not showing properly.

Can anyone please help solve this issue so that the 3 footer widgets together occupy the entire width as well as show properly in responsive mode/layout?