How to prevent span tags overlapping each other?

Question

Why are the <span> tags overlapping each other, and how to prevent that? I need them to wrap around the screen nicely so they don't obstruct the views of the others.

HTML:

<span class="alphas">#</span>
<span class="alphas">A</span>
<span class="alphas">B</span>
<span class="alphas">C</span>
<span class="alphas">D</span>
etc...

CSS:

.alphas {
    border-radius: 5px;
    border: 12px solid #8AC007;
    padding: 20px;
    background-color: #006677;
    width: 200px;
    height: 150px;
}

See the demo - http://jsfiddle.net/uyg0zdLf/

Answer 1

<span> tag is inline level by default, width and height values will not apply. You could set it as inline block, read this post to learn more of the differences between them.

UPDATED DEMO

.alphas {
    display: inline-block;
}

One more thing - browser also renders white space on inline* level elements, follow this post for more info.