Produkt Abstände

Warum gibst du uns nicht einfach einen Link zur Seite... dann hast du wahrscheinlich dein Problem schnell gelöst.

Versuche bitte mal

.products-4 > li {
   margin-right: 0px;
}

Ins 'zusätzliche CSS (Dashboard -> Design -> Customizer -> zusätzliches CSS) einfügen.
Was meinst du mit 'ganz am Bildschirmrand'?

Funktioniert nicht? ... hmmm... sollte es aber.
Kann es sein, dass du den CSS Code an einer falschen Stelle (also nicht im zusätzlichen CSS) eingefügt hast - oder die Seite nach der Änderung nicht aktualisiert und ggf. den Cache Speicher nicht geleert hast?

... so sollte es aussehen. Die weiße Linie zwischen den Bildern ist eine Border um das <ll></li> - auch die bekommt man noch weg...

Und der letzte Punkt - die Bilder bildschirmbreit würde auch gehen. Dazu müsstest du dem 'li' zusätzlich eine Breite von 25% geben

.products-4 > li {
   margin-right: 0px;
   border: 0px;
   width: 25%;
}

und
für die Elternelemente

#main {
  padding: 20px 0px 20px 0px;
}
#main .fusion-row {
  max-width: 100%;
}

Die letzten beiden Vorschläge sind allerdings mit Vorsicht zu genießen - da musst du prüfen, ob auf anderen Unterseiten diese nicht zu unerwünschten Nebenwirkungen führt. Wenn ja, müsste man den/die Selektor(en) etwas näher spezifizieren, so dass die Änderungen nur auf der Shop-Seite wirken.

Beim Ausprobieren ist mir aufgefallen, dass deine Seite bei einer Bildschrimgröße < 1024px die Anzeige einspaltig wird ... tja... und dann irgendwie grottig und mickrig aussieht :(!
Du könntest mal versuchen, ob du diese Anzeige etwas aufhübschen kannst, wenn du mal mit der Breite etwas variierst.. zB

@media screen and (max-width: 1024px) {
  .fusion-body .products li {
   width: 50%;
}
}