I'm struggling to align the X inside the circle perfectly; they just don't seem to match up no matter what I try. Here's a glimpse:
https://i.sstatic.net/OIZik.png
html:
<div class="messages">
<span class="closebtn dot" onclick="this.parentElement.style.display='none';">×</span>
{% for message in messages %}
<span><li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li></span>
{% endfor %}
</div>
CSS:
.messages {
position: sticky;
width: 235px;
z-index: 1;
float: right;
border-radius: 1px;
margin: 0 20px;
}
.closebtn {
color: #535353;
font-size: 30px;
cursor: pointer;
position: absolute;
z-index: 1;
margin: -25px 0 0 -10px;
}
.dot {
height: 25px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}