Eiche fam

The post content width isn’t set on the container but on each element inside, in order to support full-width images. So I have this, which applies a standard width to most components:

.entry-content > div {
  width: 90%;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

There are more elements than just <div> of course, but you get the idea. But Jetpack’s stylesheet is loaded after the theme’s, so the related content got this, which overrode my defined margin:

div#jp-relatedposts {
  margin: 1em 0;
}

This, of course, resulted in the related posts container being left aligned, instead of being in that centered content column. The most immediate solution would have been to slap an !important on the margin in my own stylesheet, but I didn’t want to do that. Relying on it establishes an artificial specificity, and it can easily lead to an arms race of !important attributes scattered throughout your code.

The solution is simple: increase the specificity in my own stylesheet. So I changed my selector to this, which easily overrides the lone selector in Jetpack’s stylesheet:

.entry-content #jp-relatedposts

Done and done.