I have an issue to center an element in my div.
I'm using display flex, align-self and justify-self to center it.
I think this is ok by this way, but I have an unknown element when I inspect from the web browser.
You can see on the right, there is an as striped element that I don't know where it come from.
Here is the parent element made with grid.
You can see the issue from the fiddle here
https://jsfiddle.net/Martin40/qtjphvga/3/
Here is my CSS
.customer_card{ background: green; padding: 10px; margin-bottom: 20px; border-radius: 10px; display: grid; grid-template-columns: 20% 80%; gap: 0px 10px; justify-content: center; justify-items: stretch; align-items: center;}.customer_card_logo { display: flex; position: relative; justify-self: center; text-align: center; background: grey; border-radius: 50%; width: 50px; height: 50px; color: white; font-weight: bold; cursor: pointer;}.customer_card_logo > .material-icons-outlined { align-self: center; justify-self: center; font-size: 2rem; transition: all 0.4s;}.customer_card_logo:hover > .material-icons-outlined { transform: rotate(90deg);}.customer_card_name { display: block; font-weight: 600; font-size: 1.5rem;}.customer_card_addresse { font-size: 1.2rem;}Here is my HTML
<head><link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet"></head><div class="customer_card"><div class="customer_card_logo"><span class="material-icons-outlined"> autorenew </span></div><div class="customer_card_informations"><span class="customer_card_name">Company Name</span><span class="customer_card_addresse">Adresse <br> ZIP CITY NAME</span></div>Anyone know what the problem is?