justify-content: space-between with equal space between first and last items also [duplicate]

Answer 1

Calculate the difference and add a margin-left to the left element and a margin-right to the right element. Though I know you wanted an HTML/CSS solution, you can do this with JavaScript and make it perfectly responsive or just feel out the margin sizes with HTML/CSS.

HTML

JS

window.addEventListener('load', setMargins);

var boxClass = document.getElementsByClassName('box');

function setMargins() {
    var element = document.getElementById('element');
    var widthOfElement = element.clientWidth;
    var sizeOfEachMargin = (window.innerWidth - (widthOfElement * 3)) / 4;

    for (var i = 0; i < boxClass.length; i++) {
        boxClass[i].style.marginLeft = sizeOfEachMargin + 'px';
    }
}