возникли проблемы с установкой ширины этого div на 1px?

Я создал следующий компонент пользовательского интерфейса:

http://codepen.io/ac123/pen/xqYzxR

<div id="MapKeys">
    <div id="RegionalSupply">
        <div class="header">Regional supply</div>
        <div class="circle"></div>
        <div class="detail">Circles sized by the amount of change from the previous period</div>
    </div>
    <div id="CorridorNetFlowDirection">
        <div class="header">Corridor net flow direction</div>
        <div class="dottedLine">
            <div class="part1"></div>
            <div class="part2"></div>
            <div class="part3"></div>
        </div>
        <div class="detail">Lines sized by the amount of change in net flow from the previous period</div>
    </div>
</div>

#MapKeys
{
    .header{
        font-size:16px;
    }

    #RegionalSupply{

        height:100px;
        width:240px;
        border:solid purple 1px;
        display:inline-block;
        padding:10px;

        & > .circle {
            width: 14px;
            height: 14px;
            background: lightgrey;
            -moz-border-radius: 7px;
            -webkit-border-radius: 7px;
            border-radius: 7px;
            display:inline-block;
        }

        & > .detail{
            display:inline-block;
            width:150px;
            font-size:12px;
        }
    }

    #CorridorNetFlowDirection{

        height:100px;
        width:240px;
        border:solid red 1px;
        display:inline-block;
        padding:10px;

        & > .dottedLine
        {
            & > .part1{
                width: 12px;
                height: 10px;
                background: lightgrey;
                display:inline-block;
            }

            & > .part2{
                width: 1px;
                height: 10px;
                background: none;
                display:inline-block;
            }

            & > .part3{
                width: 12px;
                height: 10px;
                background: lightgrey;
                display:inline-block;
            }
        }

        & > .detail{
            display:inline-block;
            width:150px;
            font-size:12px;
        }
    }
}

Компонент «Сетевое направление потока в коридоре» отображается серым значком, представляющим собой пунктирную линию. Я определил эту пунктирную линию как 3 смежных div со средним div, имеющим wdith:1px и background:none.

Однако внешний вид обработанной средней ширины div больше похож на 6px или 7px. Что мне нужно настроить в моем css или html, чтобы эта пунктирная линия отображала ширину 1px между 1-м и 3-м div?

Кроме того, как я могу указать общие атрибуты css для части 1, части 2, части 3 в этом сценарии? Например, я ожидал, что следующий общий стиль будет работать, но это не так:

& > .dottedLine
{
    height: 10px;
    display:inline-block;

    & > .part1{
        width: 12px;
        background: lightgrey;
    }

    & > .part2{
        width: 1px;
        background: none;
    }

    & > .part3{
        width: 12px;
        background: lightgrey;
    }
}