Das ist alles kein Hexenwerk und wenn man von HTML und CSS spricht, dann sind das keine Programmiersprachen.
HTML bringt für jedes Element (browserabhängig) eine gewisse Voreinstellung/Default-Werte mit... für alles, was man eben so braucht! Größe, Farbe, Abstände.....
Und wenn einem das so nicht gefällt, dann nutzt man CSS, um das nach seinen Vorstellungen anzupassen. Der Trick dabei ist eigentlich nur, man muss die richtigen Elemente für die Anpassungen ansprechen. Dazu nutzt man sogenannte Selektoren... also Dinge, die im CSS 'Code' schon drin stehen, oder die man bewusst da reinschreibt, um dann ganz gezielt auf einzelne oder Gruppen von Elementen Einfluss nehmen zu können.
Der Code der bei dir jetzt (hoffentlich) funktioniert...
#wrapper .breadcrumb ol
spricht eine <ol> ... (eine geordnete Liste)
innerhalb eines Elementes mit der Klassenbezeichnung .breadcrumb
welches wiederum in einem Element drin steckt, das eine ID mit namens 'wrapper' hat.
Und dann kann man nur hoffen, dass es nicht noch mehr ol's in 'breadcrumb' im 'wrapper' gibt, denn die hätte man dann auch getroffen.
Aber wenn du zu diesem Thema mehr wissen willst, dann schau hier nach.
https://wiki.selfhtml.org/wiki/CSS/Selektoren
... nun, wie findet man diese richtigen Selektoren? ... nicht mit Google, die stehen im Quellcode deiner Seite. Drücke mal die F12 Taste, wenn deine Seite im Browser angezeigt wird, dann sollte sich der 'Inspektor' öffnen und da solltest du (mit etwas Übung) alle Informationen finden, die man braucht!