Font in footer changes despite footer already having CSS class declared - html

Question

I have a design which uses DIV with flex, at https://jsfiddle.net/1s2mpba6/, but the main problem here relates to use of webfonts, one area, despite not having a webfont, seems to have been replaced even though the body font is used.
I get this when it should be Helvetica:
These are the areas of the HTML and CSS which seem to be problematic:
header.california-m {
background-color: #B22222;
border-radius: 10px;
color: #FFF;
padding: 30px;
width: 840px;
}
footer.california-m {
background-color: #333;
color: #FFF;
padding: 30px;
width: 840px;
margin-bottom: 20px;
}
footer.california-m h2 {
margin-left: 20px;
}
#font-face {
font-family: Fabriga Regular;
src: url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.eot?v=1.1.0");
src: url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.woff2?v=1.1.0") format("woff2"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.woff?v=1.1.0") format("woff"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.ttf?v=1.1.0") format("truetype"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Regular.svg?v=1.1.0#Regular") format("svg");
font-weight: 400;
font-style: normal
}
#font-face {
font-family: Fabriga Medium;
src: url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.eot?v=1.1.0");
src: url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.woff2?v=1.1.0") format("woff2"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.woff?v=1.1.0") format("woff"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.ttf?v=1.1.0") format("truetype"), url("https://c.atcdn.co.uk/fonts/ATFabriga-Medium.svg?v=1.1.0#Medium") format("svg");
font-weight: 400;
font-style: normal
}
#font-face {
font-family: ATVFabriga;
src: url("https://c.atcdn.co.uk/fonts/ATVFabriga.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
.columns-vehicleresult+h1,
h2,
h3 {
font-family: Fabriga Regular, Helvetica, sans-serif;
}
.columns-vehicleresult .column p.autog1 {
font-family: Fabriga Regular, Helvetica, sans-serif;
}
.columns-vehicleresult .column p.autog1 b {
line-height: 16px;
}
.atc-type-picanto {
font-family: ATVFabriga, Helvetica, sans-serif;
}
<footer class="california-m">
<h2>1 Anytown Road, Anytown 1</h2>
<h2>&phone; 555 0100</h2>
</footer>
However, I've not used a font-family for header or footer so why is this only happening to the footer and what do I need to fix?
Functionally, it works well, aesthetically, it's a small thing to fix, advice welcomed!
It should be in Helvetica as with the rest of the text for body declared in CSS, apart from the .columns-vehicle-result which use a webfont.

Answer 1

The content of your footer are two h2 elements, and the rule with selector .columns-vehicleresult + h1, h2, h3 applies to those.
If the formatting of that rule is supposed to only apply to headline elements that immediately follow a .columns-vehicleresult, for all three of those headline levels - then this would need to become
.columns-vehicleresult + h1, .columns-vehicleresult + h2, .columns-vehicleresult + h3 { }