How can I avoid CSS3 elements from overlapping? They are all
<span> precious </span> <span> and </span> <span> cute </span>
And here is my current CSS code
span
{
margin : 20px;
min-width: 150px;
border-radius:5px;
background-color:white;
border: 2px solid white;
font-weight:bold;
padding:10px;
-webkit-transition: all 1s ease;
-moz-transition: all .8s ease;
transition: all 1s ease;
}
This results in unwanted overlap like shown in the image below
https://i.sstatic.net/LbOj4.jpg
Appreciate any advice from experienced CSS3 professionals on Stack Overflow