I have created a collection-repeat feature that loops through my objects and populates cards based on them. I am facing two main challenges in completing this task. Despite using 'Thumbnail' cards, I am struggling to properly set margins. The issue lies in the fact that it adds margin on the left side but not on the right or between different cards (bottom margin). I have attempted to use CSS for this, but so far nothing has been successful.
Below is the snippet of my HTML code:
<div class="card" collection-repeat="item in items" item-width="'100%'">
<div class="item item-divider">
{{item.eventTitle}}
</div>
<div class="item item-text-wrap">
<b>{{item.eventHour}}</b><br />{{item.eventText}}
</div>
</div>
Upon viewing the result in the browser without any custom CSS applied, there are noticeable issues with the left and nonexistent right margins:
https://i.sstatic.net/iLljI.png
I am seeking guidance on how to address both the bottom and right margin concerns. Any insights would be greatly appreciated.
Thank you for your assistance in advance.