margin-right: auto but I want it would be maximal value

I have a container about a width equals 70% of my page. In the container I put four boxes about a width equals 22%, and set the margin-right parameter to divide those boxes each other. However, those boxes don't cover all width of the parent element - the margin-right parame开发者_运维技巧ter which I set to "auto" is small, and it would be a bit bigger to justify those boxes for all the parent width (70% of the web page).

I know I can set the margin-right for "4%", but I want do it automatically, for two, three, four boxes.

Example code

<div id="parent" style="width: 70%;">
    <div class="box" style="display: inline-block; margin-right: auto; width: 22%;">box 1</div>
    <div class="box" style="display: inline-block; margin-right: auto; width: 22%;">box 2</div>
    <div class="box" style="display: inline-block; margin-right: auto; width: 22%;">box 3</div>
    <div class="box" style="display: inline-block; margin-right: 0; width: 22%;">box 4</div>    
</div>

---

Test Here

When I try this in Chrome on OS X, each box has a width of 109px. This seems to me that they are appropriately filling the same amount of space.