In my CSS code, I created a rule that only affects
#banner .content h1 but it simply does not affect the h1 with id="banner" class="content"
It's because you're not using it properly,
#banner .content h1 will style the
h1 element inside another element with class
content which in turn has to be inside another element of ID
banner. The correct way to select the element you want to select is
h1.content#banner. In the future, refer to https://www.w3schools.com/cssref/css_selectors.asp if you need help with this stuff.