边框宽度产生不需要的角度

Question

我得到一个奇怪的角度，我认为这是边框宽度造成的。似乎有一个非常愚蠢的问题，但我似乎无法为此找到解决方案。查看下面所附的图像，以查看左上角的角度。我尝试过更改所有边框的宽度，但这似乎也不起作用。

    .section-progress {
        align-content: flex-start;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: auto;
        min-height: auto;
    }

    .section-progress .module-container {
        background-color: #F2F2F2;
        border-bottom: 1px solid #D0D0D0;
        border-left: 1px solid #D0D0D0;
        border-right: none;
        border-top: 4px solid #D0D0D0;
        cursor: pointer;
        flex: 1 0 25%;
        padding-bottom: 15px;
        padding-left: 25px;
        padding-top: 15px;
        padding-right: 15px;
        position: relative;
    }

    .section-progress .module-container::after {
        content: '';
        display: block;
        position: absolute;
        top: 28px;
        right:-6px;
        width: 10px;
        height: 10px; 
        background-color: #F2F2F2;
        border-right: 1px solid #D0D0D0;
        border-bottom: 1px solid #D0D0D0;
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        z-index: 10;
    }

    .section-progress .module-container:last-child {
        border-right: 1px solid #D0D0D0;
    }

    .section-progress .module-container:last-child::after {
        display: none;
    }

    .section-progress .module-container.completed:before {
        background-image: url('../img/icons/check.svg');
        background-repeat: no-repeat;
        content: '';
        height: 21px;
        position: absolute;
        right: 12px;
        stroke: #2fbff2;
        top: 25px;
        width: 21px;
    }

    .section-progress .module-container.currentModule::after {
        background-color: #FFFFFF;
    }

    .section-progress .module-container.currentModule {
        background-color: #ffffff;
        border-top-color: #3391d4;
    }

    .section-progress .module-container h1 {
        color: #696969;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 0;
        width: 50%;
    }

    .section-progress .module-container.disabled h1 {
        color: #ACACAC;
    }

<div class="box section-progress">
    <div class="module-container completed">
        <h1>COURSE WORK</h1>
    </div>
    <div class="module-container completed">
        <h1>PERMIT&nbsp;&amp; LICENSING</h1>
    </div>
    <!-- dynamically add currentModule class if on current module -->
    <div class="module-container currentModule">
        <h1>DRIVER TRAINING</h1>
    </div>
    <!-- dynamically add/remove disabled class if module is not available -->
    <div class="module-container disabled">
        <h1>MENTOR ANOTHERWORD</h1>
    </div>
</div>

这是该问题的有效演示 https://jsfiddle.net/0exwkgvu/1/