Parent theme CSS overriding custom header/footer.

Do you have a specific example where you believe a rule in the parent stylesheet is overriding a rule in main.css? As long as main.css comes after the parent theme’s style.css file (which it does in your case), then any rules in main.css which have the same selectors, or selectors with the same specificity, as rules in the parent theme style.css will take precedence. In other words, the way that CSS works is if there are multiple rules which have the same selectors or specificity, the rule which come last will be in effect. If you don’t know about CSS specificity, then you should read this article.

Ah, OK, now I see that the non-blog page isn’t a TwentyFifteen page. It’s not even a WordPress page. So, the problem is that the CSS from main.css isn’t working off the same foundation in both cases. Let me give you an example.

If you look at the site title, in the non-blog page, the font-size is 64px. In the blog page, the font-size is 108.8px. Why so much bigger?

The site title has a class of title, and it’s this rule in main.css which sets the font-size for both pages:

.title {
    font-size: 4em;
    color: white;
    font-family: 'Gloria Hallelujah', cursive;
    display: inline-block;
    vertical-align: middle;
    padding-bottom: 20px;

}

This rule is used in both the blog and non-blog page, so why are sizes of the titles different?

Note that the value for font-size is 4em. The em units means to use a multiple of whatever the parent font-size is (or nearest parent). So 1em means to use the same font-size as the parent, 2em means twice as big as the parent element, 0.5em means half the size of the parent, and 4em means to set the font-size to 4 times the parent element.

Let’s trace back through the non-blog page.

The immediate parent of the .title element is the .wrapper container, and it has a font-size of 100%, which it inherited from the rule for html in main.css. A font-size of 100% is the same as 1em, or, use the same font-size of the next parent element.

The parent of .wrapper is .header-container, which also inherits a font-size of 100% from html in main.css. Same with the containing elements .wrapall, body, and finally, the html element is defined as having a font-size of 100% in main.css.

So how can the browser calculate an actual font size if all of the rules are relative to one another, i.e., they’re all percentages or ems? If an actual font-size in pixels is not given, then the default font-size is 16px. So the size of 16px gets passed all the way up to the rule for the title, and the font size ends up being:
16px (default font size) X 4em (font size for title) = 64px.

Now, let’s make the same trace of the blog page.

The parent of the .title element is .wrapper, and the font-size is 100%, which is inherited for a rule from the parent theme (TwentyFifteen) for a DIV.

The parent of .wrapper is .header-container, which inherits a font-size of 100% from html in main.css.

The parent of .header-container is the body element, and in this case, there’s a rule in the TwentyFifteen style.css file which sets the font-size to 1.7rem. The rem unit of measure means “root element,” or the html element. Just like the non-blog page, though, the html element is defined as having a font-size of 100% in main.css. Since there’s no explicit definition for font-size, the default of 16px is use. So the final font size ends up being:
16px (default font size) X 1.7rem (size for body) X 4em (size for title) = 108.8px.

OK, enough with the long-winded explanation. How to fix? Easiest way is to set the font-size of the body element in the blog to match the font-size of the body element in the non-blog page. Add this rule to the end of your child theme’s style.css file:

body {
   font-size: 100%;
}