I'm experiencing an issue where moving my mouse over any of the li's causes them to go out of place. How can I resolve this issue?
Here is a demo: https://jsfiddle.net/z970pg6n/
ul {
list-style: none;
display: block;
padding: 0;
margin: 0;
}
ul.pictures li {
margin: 0;
padding: 0;
display: inline-block;
margin-right: 20px;
width: 200px;
height: 200px;
background-color: red;
clear: both;
}
ul li p {
display: none;
width: 100%;
background: black;
color: white;
}
ul li:hover p {
display: inline-block;
}<ul class="pictures">
<li>
<p>Sokina Jue</p>
</li>
<li>
<p>Sokina Jue</p>
</li>
<li>
<p>Sokina Jue</p>
</li>
<li>
<p>Sokina Jue</p>
</li>
</ul>