DIV с процентной шириной не работает (без границ, без полей/отступов)

я создал свой собственный индикатор выполнения и получил некоторые проблемы

у меня есть полный .box с шириной = 90%

в этом поле у ​​меня есть div .progress с шириной = 100

в .progress div я получил .left-free div 10%, .progressbar 80%, .right-free 100%

в .progressbar я получил 4 div .grey 30%, .violet 30%, .brown 30%, .blank 0%

проблема в том, что я не знаю, почему .grey, .violet, .brown не одного размера!

редактировать: (.blank div - это просто разделитель. с этим все в порядке.)

я не использую поля или отступы или любые границы. граница вокруг .progressbar была реализована с помощью box-shadow.

мой HTML-код:

<div id="box">

    <div id="progress">

        <div class="left-free">10% free</div>

        <div class="progressbar">
            <div class="grey" style="width:30%">30%</div>
            <div class="violet" style="width:30%">30%</div>
            <div class="brown" style="width:30%">30%</div>
            <div class="blank" style="width:0%">0%</div>
        </div>

        <div class="right-free">10% free</div>

    </div>

</div> 

мой CSS-код:

body
    {
        width:100%;
        background-color:#eee;
        padding:0;
        margin:0 auto;
    }
#box
    {
        width:90%;
        padding:0;
        margin:2% auto;
        background-color:#eee;
    }
#progress
    {
        width:100%;
        padding:0;
        margin-bottom:10%;
    }    
.left-free
    {          
        width:10%;
        float:left;
        box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 1);         /* right */
    }
.progressbar
        {
            position:relative;
            width:80%;
            float:left;
            background-color:#ffffff;
            box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 1),         /* top */
                        inset 0px -1px 0px rgba(0, 0, 0, 1);         /* bottom */
        }
.grey {background-color:grey;}
.violet  {background-color:violet;}
.brown  {background-color:brown;}
.blank {background-color:#ffffff;}

.grey,
.violet,
.brown,
.blank
    {
        height:100px;                                            
        float:left;
        margin-top:1px;
    }

.left-free,
.progressbar,
.right-free
    {
        height:102px;                                           
    }
.right-free
    {
        width:10%;
        float:left;
        box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 1);         /* border left */
        text-align:right;
    }

Я сделал снимок экрана и поместил зеленую полосу одинаковой ширины на все 3 поля! на .violet и .brown div у меня есть разделитель на правом конце (надеюсь, вы видите его на изображении)

вот кадр для лучшего обзора

вы можете увидеть работающий код на jsfiddle

второй пример: jsfiddle 2

есть идеи, почему коробки не имеют одинакового размера?

редактировать: я загрузил html в pastebin