It’s because you have a css definition for .row h1 that’s red, and your h1 is embedded within a div class=”row”. Remember, in CSS the last definition for a style always wins. The easiest thing to do, if it isn’t an issue elsewhere, is change the color defined in .row h1 to your #333 color.
Looks like you’ve got .row h1 defined on line 24 of your style.css file. Changing the color defined there would fix your issue, but like Jason said, after you make the change, check the rest of your site to make sure it doesn’t change anything you didn’t want to be changed.
I’m guessing you are using a custom css file to overwrite styling? Anyway, I would not recommend changing or using the class .row in any modifications unless you absolutely have to. This is a class associated with the responsive structure (Bootstrap) and it has specific classes and attributes needed.
I looked at your source of the red and this is where I found it:
If you take out the color there, your headings go to #333
To change the colours of the headings, the theme options have this setting, but I also noticed you are on an older version of PReference Lite. I would recommend updating it…right now it’s 1.7.5 but I just recently uploaded another update (a significant one) that is version 1.8.5 now).