Hi @ChrisTD83 ,
das ist schon einmal sehr gut, dass du da vorsichtig bist. Mit CSS ist es tatsächlich nicht so tragisch wie bei anderen Codeänderungen, bei einem “Fehler” wird also nicht dein kompletter Shop zerstört sein. Aber wir wissen ja - better safe than sorry 
Zunächst würde ich empfehlen, dass du eine kurze Kopie deines live Themes erstellt. Damit kannst du den Code in Ruhe in Kopie testen und eventuelle Fehler spiegeln sich nicht im live Theme wieder. Dazu klickst du in der Liste deiner Themes Vertriebskanäle > Onlineshop > Themes einfach auf die 3 Punkte deines live Themes, neben dem “Anpassen” Button und wählst “duplizieren”.
Danach wird eine Kopie erstellt. Sobald diese erstellt ist, geht du wieder über die 3 Punkte auf “Code bearbeiten” in den Code Editor.
Zum Testen könntest du den oben genannten Code einfach mal in die base.css File ganz am Ende eintragen. In der Liste der Themes gehst du dann wieder auf die 3 Punkte deiner Kopie und wählst “Vorschau”. Dann solltest du die Änderung schon sehen. Manchmal dauert es aber ein paar Sekunden, bis die Änderungen sichtbar sind.
Anyway - um CSS nachhaltiger einzupflegen gibt es die Möglichkeit selbst eine CSS File anzulegen. Dadurch wird dein Code bei einem Update des Themes nicht überschrieben und du kannst deinen eigenen Code jederzeit wieder mit dem Theme verbinden. Dabei gehst du wie folgt vor:
Im Code Editor deiner Kopie navigierst du in der linken Spalte zum Ordner “Assets” und klickst dort auf “Neue/n/s Asset hinzufügen”.
Hier wählst du den Reiter “Leere Datei erstellen”, die Erweiterung “css” und den Dateinamen “custom”. Damit wird die “custom.css” File erstellt.
Nun musst du diese File noch mit dem Theme “verbinden”, genauer gesagt den Aufruf der File einbinden. Dazu wählst du im Ordner “Layout” die “theme.liquid” File aus.
Suche im Code der theme.liquid nach der nachfolgenden Zeile
{{ 'base.css' | asset_url | stylesheet_tag }}
Das ist die Standard CSS File die aufgerufen wird. Füge nach dieser Zeile einen Zeilenumbruch ein und den nachfolgenden Code in die neue leere Zeile:
{{ 'custom.css' | asset_url | stylesheet_tag }}
Jetzt kannst du die Datei über den Button “Speichern” oben rechts speichern. Diese Änderung bewirkt, dass dein custom CSS nach dem standard CSS geladen wird. Dadurch hast du die Möglichkeit Styles mit eigenem CSS Code zu überschreiben.
Und das war es schon. Jetzt kannst du die leere custom.css File die du eben erstellt hast mit dem Code aus der letzten Nachricht füllen, speichern und schauen ob die Änderung deinen Wünschen entspricht.
Wie gesagt, die 5rem kannst du reduzieren (3rem etc.) oder erhöhen (7rem etc.) oder andere Einheiten wie bspw. Pixelwerte angeben (50px etc.).
Solltest du die ideale Einstellung gefunden haben, gehst du in den gleichen Schritten mit deinem live Theme vor oder alternativ, falls du in der Zwischenzeit keine Änderungen an deinem live Theme vorgenommen hast, kannst du die Theme Kopie einfach über “Veröffentlichen” live schalten.