How to change footer widget area background color?

URL: https://www.johnrothra.com
Customizr: 3.3.12

I’ve looked at the site’s design code to see the div class or id I need to change. However, I can’t figure it out.

Here’s what I’m seeing:

<footer id="footer" class> ... </footer>
Contains both the widget area and the colophon (footer’s social icons, copyright, back to top link).

Next in line…

<div class="row widget-area" role="complementary"> ... </div>
Contains the widget area, but it doesn’t extend the full width of the screen, but only the immediate section of the widgets. Inside here are the individual widgets.

When I changed the color of the widget area, I tried these variations in the custom css:

#footer .container {
    background-color: #dd0000;
}

Changed only the widget area and colophone area that contained the content.

#footer .container.footer-widgets {
    background-color: #dd0000;
}

Changed the same area, but only in the widget area.

Both of these left the gray to the left and right.

What CSS do I change to alter the entire background color from the default shade of gray to something else (just the darker gray area, no the colophon area below — I want to leave it the same).

BTW, I’m not wanting to use red, just chose to test with that for clear contrast with the gray (sunlight and my laptop don’t make for easy visibility of color shades).