cssflexboxcss-griddisplay

Display flex horizontally centering issue

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.

enter image description here

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.

enter image description here

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?

Solution

  • I didn't talk about the gap of the grid but the stripped element in the flex

    justify-content: center;

    On the customer_card_logo saved the problem.