I'm trying to put an image inside a div of the same dimension but for some reason the image keeps appearing to right of the div even though it's inside the div in my html:
<img width="16" height="16"></img>
The issue is with
left: 20px; in your
.userFlair css. It's telling the image to shift 20 pixels left from the start of the container, which is larger than the container itself.
Changing this to
left: 0; or omitting it completely will put the image in the div.
Here's an updated fiddle.