html - :画面/ブラウザの端に重なる疑似要素の前

Question

で作成した疑似要素が:before画面の端に重なっているようです。いじってleftも修正されず、コンテナ要素を1つに配置してその要素を移動すると、コンテナ要素の端に重なってしまいます。

.hex:before {
    content: " ";
    position: absolute;
    height: 0px;
    width: 0px;
    float: left;
    border-right: 30px solid #6C6;
    border-top: 52px solid transparent;
    border-bottom: 52px solid transparent;
    left: -30px;
}

.hex {
    position: relative;
    float: left;
    width: 60px;
    height: 104px;
    background-color: #6C6;
}

.hex:after {
    content: " ";
    position: absolute;
    float: left;
    border-left: 30px solid #6C6;
    border-top: 52px solid transparent;
    border-bottom: 52px solid transparent;
    right: -30px;
}

いくつかの簡単なhtmlの下：

  <div class='board'>
    <div class="hex"></div>
  </div>