CSS class mismatch in header

When I place a custom block in the "Header top" region, the text in the block was black and hard to read against the dark black background.

The "#header-top" div has a class "region-header-top." However, the colors.css file has the selector ".header-top-region." Through my local.css, I changed the selectors to ".region-header-top." Once I made this change, the text in my custom blocks was rendered in the expected readable colors.

I'm not sure which needs to be changed, the html class or the css selector.