Question

I need inline DIVs to be spaced equally betweenn each other, and additionally between border and first (or last) DIV in the row.
I use solution found on Fluid width with equally spaced DIVs. It gives me equal spacing between DIVs, but left DIV sticks to the left border, and right DIV sticks to the right. I’d like it to be equally spaced from the borders as they are from each other.

UPDATE:
content DIVs are being created dynamically by Django, so I cannot say how many of them will be there in the line (between 1 and 4).

How can I create additional space on sides which will be equal to distance between DIVs?

Here is html:

    <div class="container">
        <div class="content">
                <canvas width="130" height="130"></canvas>
            </div>
            <div class="content">
                <canvas width="130" height="130"></canvas>
            </div>
            <div class="content">
                <canvas width="130" height="130"></canvas>
            </div>
        </div>

and css:

div.container {
    width: 100%;
    text-align: justify;
}


div.content {
    display: inline-block;
    width: 20%;
    margin: 0 auto;
}

div.container:after {
    content: "";
    width: 100%;
    display: inline-block;
}

Answer 1

And right after asking the question, I’ve figured out the answer (how ironic?). I’ll share it in case someone needs it.

What I’ve done was creating spacer DIVs with 0 width before first and last content DIV. Here is how it looks like:

HTML:

    <div class="container">
        <div class="spacer"></div>
        <div class="content">
            <canvas width="130" height="130"></canvas>
        </div>
        <div class="content">
            <canvas width="130" height="130"></canvas>
        </div>
        <div class="content">
            <canvas width="130" height="130"></canvas>
        </div>
        <div class="spacer"></div>
    </div>

and css:

    div.container {
        width: 100%;
        text-align: justify;
    }


    div.content {
        display: inline-block;
        width: 20%;
        margin: 0 auto;
    }

    div.container:after {
        content: "";
        width: 100%;
        display: inline-block;
    }

    div.spacer {
        display: inline-block;
        width: 0;
    }