Aufgabe Nr. 9: Erscheinungsbild von Listen ändern

Durch meinen zuletzt veröffentlichten Artikel ist mir klar geworden, dass ich nicht darum herumkomme, mich mit Cascading Style Sheets (CSS) auseinanderzusetzen.
Wenn das Bullet-Zeichen links aus dem Artikel herausragt, sieht das einfach nicht schön aus.

Als Lösung habe ich in der Datei index.php über der Zeile div.clear { folgenden kurzen Abschnitt notiert:

div.post-content ol, ul {
  line-height: 1.6em;
  margin: 1em 0 0.6em;
  padding: 0 0 0 2em;
}

div.post-content li {
  margin-bottom: 0.4em;
}

Kurze Erläuterung (natürlich in Form einer Liste):

1. Für nummerierte Listen (<ul>...</ul>) und Aufzählungslisten (<ol>...</ol>) lege ich wie für <p>...</p> die Zeilenhöhe auf das 1,6-fache der Schriftgröße des Elements fest.
2. Weiterhin bekommen diese Listen von mir einen Außenrand/Abstand (margin:...) verpasst, der oben der Schriftgröße des Elements entspricht. Rechts und links soll es keinen Abstand geben. Unten soll der Abstand das 0,6-fache betragen.
3. Die Innenabstände (padding:...) definiere ich so, dass nur links ein Abstand des 2-fachen der Schriftgröße des Elements entsteht.
4. Zuletzt sollen Listeneinträge (<li>...</li>) unten den 0,4-fachen Abstand besitzen, damit mehrzeilige Einträge deutlicher zusammenstehen.

Beim Verfassen dieses Artikels habe ich dann bemerkt, dass auch bei <pre>...</pre> zumindest der Abstand unten nicht stimmt. Daher notierte ich direkt darunter noch:

div.post-content pre {
  margin: 1em 0;
}

Beide Änderungen sind allerdings mit Vorsicht zu genießen, da ich kein CSS-Profi bin und deswegen unerwünschte Nebenwirkungen nicht ausschließen kann.