Ich habe eine CSS-Tabelle und möchte zwischen den Zellen Platz haben, jedoch nicht links vom ersten und rechts vom letzten Bild.

Hier ist ein Screenshot von dem, was ich habe:

Hier ist ein Screenshot von dem, was ich gerne hätte:

Der aktuelle HTML-Code lautet:

    <div id="footer">
        <div class="lower"><img src="images/one.jpg" alt="Ring being put on finger"/></div>
        <div class="lower"><img src="images/two.jpg" alt="The mens trousers"/></div>
        <div class="lower"><img src="images/three.jpg" alt="Flowers"/></div>
        <div class="lower"><img src="images/four.jpg" alt="The rings"/></div>
    </div>

und das CSS ist

#footer {
  display: table;
  width: 100%;
  max-width: 1024px;
  margin-top: 1%;
}

.lower {
  display: table-cell;
}

#footer img {
  width: 100%;
  height: auto;
  max-width: 256px;
}

Bitte beachten Sie, dass dies eine reaktionsschnelle Webseite ist. Ich möchte, dass der Speicherplatz immer verfügbar bleibt. Ich möchte jedoch, dass der Speicherplatz je nach Gerätegröße geändert wird. Verwenden Sie daher%.