Tag.

<div style="display: inline">

Hat es einen bestimmten Grund, dass du <div> mit display:inline benutzt anstatt gleich <span>?

Nun sieht auch alles super aus, nur im Browser springt ein Element in die nächste Zeile, weil der Platz nicht ausreicht. Dieses Element in der nächsten Zeile rutscht auf das erste in der oberen Zeile (sie schieben sich übereinander).

Falls sie sich wirklich überlagern, muss da noch irgendwas anderes im Spiel sein. An display:inline kann das nicht liegen, solche Elemente überlagern sich nicht, sie werden wie Wörter brav nacheinander und Zeile für Zeile auf den Schirm geklebt.

Ich weiß, dass man bei inline-Elementen nicht mit margin arbeiten kann, aber was kann ich machen, um einen Abstand zwischen dem umgesprungenen Element und dem ersten zu bekommen?

padding funktioniert bei inline-Elementen. Das scheint in deinem Fall aber nur das Beheben des Symptoms zu sein, nicht der Ursache, siehe oben.