issue with margins

[Faust]

I am trying to fix the margins of the files from the right hand side. Any idea where I got wrong here?\

.content-listing {
    overflow: hidden; /* prevents float overflow issues */
}

.content-listing .list-item {
    float: left;
    width: calc(20% - 16px); /* 5 columns */
    margin: 10px;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}



.content-listing .list-item:nth-child(5n) {
    margin-right: 0;
}



@media (hover: hover) and (pointer: fine) {
    .content-listing .list-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }
}

 

[Rodolfo]

On listings, to get the masonry effect it needs JS to compute the combined size of the display columns. It detects the size on the box layout, so it accounts margins, borders and padding.

Try using a thick border instead of margin.