The theme’s custom css function prints the css codes on the page, you see the codes when you click “view source” on your browser. The child theme’s style.css is a separate file that is called by the page.
I’d advise you to use the child-theme’s style.css or a custom css plugin. The theme’s options page will no longer be present on future updates due to a recent guideline/rule by the Theme Reviewers on wordpress.org
WP Theme Customizer Requirement 1
WP Theme Customizer Requirement 2
What am I probably doing wrong that the Child’s style.css is not picked up?
possible things I could think of:
1. You’re using the wrong ID or class.
2. Wrong property or incorrect syntax.
2. CSS Specificity
3. Caching. You’re using a caching/minifying plugin but have not refreshed the cache yet so the old style.css is being served instead of the recently modified. Browser cache might also need to be cleared.
It’s probably a caching issue in your case since you mentioned that the same codes work when added though the theme option.