Rand verkleinern

Spiel doch mal mit diesen Werten...

.home .hentry {
  padding-top: 1%;
}
.home .entry-content {
  padding: 0 1% 1% 1%;
}
.home .wp-caption.aligncenter {
  margin-top: 0;
}

Im Dashboard unter Design - Customizer in den Zusätzlichen CSS!

Ich habe bei dem gezeigtem Bild mal verschiedene Container mit border versehen!
Ich kann keine unstimmigen Seitenabstände (links/rechts) erkennen ;)

Also jetzt glaube ich zu wissen, was herauskommen soll.....

Einmal eine quick & dirty Lösung, bei der ich nicht kontrolliere was ggf. auf anderen Seiten (Beiträgen) mit den selben Classes dann nicht mehr so aussieht wie gewünscht!
Wenns so aussehn soll - es ist machbar ;-)
Kleine Zusammenfassung meinerseits:
Bei den meisten Themes werden, wie auch hier, diverse Breiten für erschiedene Bereiche in irgend einem prozentuellen Verhältnis zueinander gesetzt. Ebenfalls die Ränder (margin und padding), was bewirkt, dass für verschiedene Ausgabebreiten das Verhältnis zueinander gleich bleibt, bis das z.B. mit @mediaquery geändert wird.
Dann kommt ein Bild mit 500xpx500px und der Rand um das Bild soll nicht prozentuell zum Gesamterscheinungsbild dargestellt werden.
Da beginnt sich die Katze in den Schwanz zu beissen.
Mein Ansatz, ich bin kein gelernter Informatiker - mein Motto learning by doing - daher kann auch ein Denkfehler in meiner Arbeit begraben sein ;-)
Daher back to the roots! Zurück zu #1!
Dass heißt, den Container, der das Bild beinhaltet auf absolute Größe bringen (max-width, max-height je 540px).
Alle möglichen prozentuellen Ränder in diesem Bereich deaktiviert. Einen Rand mit 20px eingefügt und das Bild mittig gesetzt.
Die Feinarbeit, das Ganze nur auf die "post-31" zu begrenze, habe ich mir erspart.
Weiters habe ich nicht beachtet, ob und wie sich die deaktivierten margins und paddings wirklich deaktiviert werden müssen und inwieweit sich das woanders auswirkt.

Grundkurs ;) Container!! - siehe Farbrahmen #7
oder


Die Farben, die ich verwendet habe sind ja auch nur zur besseren Erkennung der verschiedenen Bereiche und können nach eigenem Geschmack gestaltet werden ;)

Wenns nicht dringend ist, sehe ich mir das noch einmal an ;-)

Vorläufiges Endergebnis ;)

Die Anweisungen aus den Zusätzlichen CSS entfernen (ggf. mit Notepad++ speichern)
.
Da du ein NoelChild16 hast kannst du die style.css verwenden, um deine Style Änderungen dort zu speichern!
Funktioniert aber auch in den Zusätzlichen CSS ;) und dort geht es online und ggf schneller.

Wohin auch immer - nachfolgender Versuch das Quadrat ins Rechteck zu zu bekommen ;)
Und wie auch immer, die Ränder auf allen 4 Seiten um das Bild müssen in irgend einer Ebene Rechteckig werden bei einer Landescape Ansicht.

Aaaaah, wenn das Bild nun anstatt 500pxx500px um den Rahmen (20px) weniger px hat, kannst du das Bild um die gewünschte Rahmenstärke vergrößern.

Wenn wo nachzubessern ist - melden

Bei mir sieht es so aus:

Der Code wollte nicht gleich mit

.secondary {
    font-family: "Trebuchet MS";
}   
.home .hentry {
  padding-top: 0;
}


.home .entry-content {
  padding: 0;
  background-color: #e1dddd;
}


.site-info {
  display: none;
}
    
#post-31 img.aligncenter {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 20px solid #cecece;
}
.site-main {
    background-color: #e1dddd;
}

Eine Altlast!

.hentry, .page-header, .page-content {
    box-shadow: none;
}