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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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?
