Jetpack Edit CSS

I am having some issues tacking on minor custom CSS rules through the Jetpack CSS editor.

Looking at the debugger, it seems the custom css simply isn’t being called whatsoever, despite verifying the html tags and css classes match up correctly.

I also tried the same thing with the Simple Custom CSS plugin, and this was able to call the custom stylesheet, but in an incorrect manner. It applied any CSS rules to the child object instead of the targeted object. To clarify;

CSS

.contents p {
	font-size: 14px;
	font-weight:700;
	text-transform: uppercase;
	text-align: right;
	line-height: 1;
	letter-spacing: 1.5px;
	font-family: "Source Sans Pro", sans-serif;
}
.subcat span {
	font-size: 10px;
	text-indent: 20px;
	text-transform: uppercase;
	text-align: right;
	line-height: 1;
	letter-spacing: 1.5px;
	font-family: "Source Sans Pro", sans-serif;
}

HTML

<p class="contents">This is line 1.</p>
<p class="contents">This is line 2.
<span class="subcat">This is subcategory 1.
This is subcategory 2.
This is subcategory 3.</span>
This is line 3.</p>

In this example, the rules for the paragraph class “contents” were applied to the span class “subcat”, and no custom css of any kind was applied to the “contents” class. I verified this in the debugger.

How do I get the edit css plugin and the theme to interact correctly with each other? I would imagine there is a theme-specific reason behind this unusual behaviour.

Thanks.