absolute positioning with percentages 50%

absolute positioning with percentages 50%

I found an anwswer from this: Absolute positioning with percentages giving
unexpected results
but the answer is not quite right shows on my screen
Here is jsFiddle from that answer.
#container {
border: 1px solid red;
height: 100px;
width: 100px;
overflow: hidden;
position: relative;
}
#item {
border: 1px dashed purple;
position: absolute;
left: 50%;
}

I am having this issue, 50% is not half of the parent's width, if someone
could help?