css - ページの中央に div を配置すると、クラスの下にランダムなピクセルが作成されます

Question

私は CSS のプロではありませんが、気に入ったプログレス トラッカーを見つけましたが、ページの中央に配置する必要があります。しかし、中央に配置するたびに、最初の 2 つの矢印の下部にランダムなピクセルが表示されます: (スクリーンショットを参照)

ページの中央に配置し、ハードコーディングされた 380px でマージン自動を使用しています。ハードコードされた 380px はハードコードされていないはずですが、「自動」は同じことをしました。

CSS:

div#wizard.wizard
    {
        width: 380px;
        margin-left:auto;
        margin-right:auto;
    }

.wizard a 
    {
        padding: 12px 12px 10px 12px;
        margin-right:5px;
        background:#efefef;
        position:relative;
        display:inline-block;
    }
.wizard a:before
    {
        width:0px;
        height:0px;
        border-top: 20px inset transparent;
        border-bottom: 20px inset transparent;
        border-left: 20px solid #fff;
        position: absolute;
        content: "";
        top: 0; 
        left: 0;
    }
.wizard a:after
    {
        width:0px;
        height:0px;
        border-top: 20px inset transparent;
        border-bottom: 20px inset transparent;
        border-left: 20px solid #efefef;
        position: absolute;
        content: "";
        top: 0;
        right: -20px;
        z-index:2;
    }
.wizard a:first-child:before {border:none;}
.wizard a:last-child:after {border:none;}

.wizard a:first-child
    {
        -moz-border-radius: 4px 0 0 4px;
        -webkit-border-radius: 4px 0 0 4px;
        border-radius:   4px 0 0 4px;
    }
.wizard a:last-child
    {
        -moz-border-radius: 0 4px 4px 0;
        -webkit-border-radius: 0 4px 4px 0;
        border-radius: 0 4px 4px 0;
    }

.wizard .badge {margin:0 5px 0 18px; position:relative; top:-1px;}
.wizard a:first-child .badge {margin-left:0;}

.wizard .current {background:#007ACC; color:#fff;}
.wizard .current:after {border-left-color:#007ACC;}

呼び出しページ:

 <div class="wizard" id="wizard">
    <a class="current"><span class="badge badge-inverse">1</span> Your Information</a>
    <a><span class="badge">2</span> Preview</a>
    <a><span class="badge">3</span> Your Copy</a>
</div>