How to force space inbetween a css table (responsive webpage) - html

Question

I have a CSS table and I would like to have space in-between the cells but not at the left of the first image and the right of the last image.
Here is a screenshot of what I have:
Here is a screenshot of what I would like:
The current HTML is:
<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>
and the CSS is
#footer {
display: table;
width: 100%;
max-width: 1024px;
margin-top: 1%;
}
.lower {
display: table-cell;
}
#footer img {
width: 100%;
height: auto;
max-width: 256px;
}
Please bear in mind that this is a responsive webpage so I would like the space to always remain however I would like the space to change according to device size, so using %.

Answer 1

Apply this.
#footer {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1024px;
background-color: #F00;
padding: 0;
margin: 0;
max-height: content-height;
}
.lower {
margin-left: 2%;
}
#footer img {
width: 100%;
height: 100%;
}
Demo

Answer 2

hi pls apply this css and set padding
.lower {
display: table-cell;
padding:0 20px;
}
.lower:first-child{ padding-left:0}
.lower:last-child{ padding-right:0}

Answer 3

Try display: flex; instead of display: table;
Give display: flex; and justify-content: space-between; to the parent.

Answer 4

Use CSS adjacent element selector:
.lower + .lower {
padding-left: 20px;
}
#footer {
display: table;
width: 100%;
max-width: 1024px;
margin-top: 1%;
}
.lower {
display: table-cell;
}
.lower + .lower {
padding-left: 20px;
}
#footer img {
width: 100%;
height: auto;
max-width: 256px;
}
<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>