Reduce size of gray band on bottom and change its color

If you’re referring to the grey background behind the footer widgets, its height expands to fit the widgets contained within it.

Using a browser inspector you’ll see that its ID is “secondary” and class is “widget-areas” – so you can always try targeting it with CSS as you like. For example, this will make the background white:

.widget-areas {
 background-color: #fff;
}

If you need further help, could you provide a link to your site.

okay, thank you Kathryn. Very helpful, and simple! One more question on this: if I were to change the background color to white, I lose the “Recent Posts” type because it is white too. How would I change the color of that type so that it is visible.?
Thank you!

Glad that was helpful! Text colour in CSS is defined by the color property, so try defining it in the CSS in addition to the background-color:

.widget-areas {
 background-color: #fff;
 color: #000;
}

If you’d like to learn more CSS to be able to make further changes, these are some useful resources:

https://dailypost.wordpress.com/2013/07/25/css-selectors/
https://dailypost.wordpress.com/2013/06/21/css-intro/
https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/
https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
https://en.support.wordpress.com/custom-design/css-basics/
https://en.support.wordpress.com/custom-design/editing-css/

p.s. if that doesn’t work, you may need to be more specific with your CSS rule. Providing a link to your site will let me help you better.