collection-repeat on thumbnail cards and weird margins - css

Question

I am building a collection-repeat that iterates through my objects and fills up cards based on them. I have two main questions to complete my job. I have been using 'Thumbnail' cards when using this approach but I am not able to correctly set margins. It basically adds some margin on the left and none on the right nor between different cards (bottom margin). I have tried CSS, but nothing works.
This is 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>
And this is what I get on the browser (no custom CSS added here), look at the left margin and the unexisting one on the right:
How can I solve both problems with bottom and right margins?
Thanks in advance

Answer 1

is there a specific reason you are using collection-repeat? it will limit your styling options.
converting to a simple ng-repeat makes your issues go away http://codepen.io/aaronksaunders/pen/PzZVPr
<ion-content>
<div class="list">
<div class="card" ng-repeat="item in items">
<div class="item item-divider">
{{item}} HEADER
</div>
<div class="item item-text-wrap">
{{item}} BODY..
</div>
</div>
</div>
</ion-content>