1) Wieso deine Seite nicht exakt zentriert ist, ist eigentlich recht naheliegend: Während das margin vom body sowohl links als auch rechts ist, ist das standardmäßige padding eines ul nur links. Genauso hast du deinen lis ausschließlich links einen Abstand gegeben. Dadurch rückst du natürlich an Inhalt alles ein Stück nach rechts.
Lösung: Setze padding-left: 0; für das ul. Und statt padding-left: 25px; für das li kannst du das padding ja auf links und rechts aufteilen, insgesamt dann 26px, weil Dezimalstellen nicht so fein sind: padding: 2px 13px 0; (die 2px sind die 2px, die du aktuell oberhalb hast). Der sichtbare Abstand zwischen den Elementen bleibt der Gleiche, aber du hast dann links und rechts den gleichen Abstand. Mit diesen zwei Anpassungen ist der Inhalt korrekt zentriert. Nicht so schön wie eine Flexbox- oder Grid-basierte Lösung, aber ausgehend von deinem Code der Weg, der die minimalsten Anpassungen erfordert.
2) Wieso es zur Überlappung kommt: Jedes li hat bei dir eine fixe Breite von 180px. Und darin hast du ein Element mit der Klasse .tile, dem du eine fixe Breite von 193px gegeben hast. Der innere Teil ist also breiter als der äußere Teil. Also kommt es zwangsläufig zur Überlappung. Das sieht man wie gesagt mit den Entwicklerwerkzeugen auch sehr gut. Man beachte, wie der Rahmen rechts außerhalb des Elements ist:
Ist das padding groß genug, kaschierst du das Problem natürlich, weil du die Überlappung dann nicht siehst, aber im Screenshot oben sieht man*), dass das Problem auch so schon besteht.
*) Auf Grund des hellen Graus auf weißem Hintergrund und der dünnen Linienstärke muss man je nach Bildschirmeinstellungen ggfs. etwas genauer hinsehen, um den Rahmen auf dem Screenshot zu erkennen.
Lösung: Das Problem löst du ganz einfach, indem du für .tile überhaupt keine fixe Breite mehr angibst. Wenn dir die Kachel dann zu schmal ist, erhöhst du vom li die Breite. Das .tile-Element nimmt eh automatisch die Breite des Elternelements an, da es ein Blockelement ist.
