Content cards for articles

Hi. I am trying to make cards for my articles. If I apply some css code to it, the background-color code is not applyed only to one article but to whole block.

So I want to achieve this →

But this happens when I try to add some styling →

<main class="articolelepulii" role="main">

  <?php foreach($page->children()->listed()->flip()->paginate(9) as $article): ?>

     <div class="cards">
<h2><?= $article->title()->html() ?></h2>
<p><?= $article->text()->excerpt(300) ?></p>
<?= $article->intro()->kirbytext() ?>
<a href="<?= $article->url() ?>">Read more…</a>

  <?php endforeach ?>


The you are applying your styles in the wrong place, but how are we supposed to know how you are doing it?

What do You mean by wrong place? I thought If i will set a width, color i will have a gap between articles and their styling that i defined in my css

Could you please post your styles? From what you posted above and your screenshot I cannot tell what exactly you did.

You were right, IT was a problem from my styles :D, solved it with grid-gap, thanks !!