ionic - list is slightly bigger than container - css

Question

I'm working on an ionic app.
I've just noticed that the list I'm using, is slightly bigger than it's container.
At first, I though it was related to the border, but it is not.
I know that it's not a deal breaker, but it does look odd to me, and i'd like this list to look nice and contained by the container without exit (even if it's only a couple of pixels)
You can see an example here: http://codepen.io/NickHG/pen/VaogjL
If you look closer, you can see that everything beneath connection setting list divider is outside.
The code i'm using is a simple list from ionic docs:
<div class="hg-login-card-advanced-connection-settings">
<div class="list">
<div class="item item-divider">Connection Settings</div>
<div ng-repeat="conn in connections">
<item class="item item-toggle">
{{conn.name}}
<label class="toggle toggle-primary">
<input type="checkbox" ng-checked="{{conn.checked}}" ng-model="conn.checked">
<div class="track">
<div class="handle"></div>
</div>
</label>
</item>
<item class="item hg-login-card-advanced-connection-settings-details" ng-show="conn.checked==true">
<input type="text" placeholder="testing">
<small class="hg-login-card-advanced-connection-settings-details-status">Status</small>
</item>
</div>
</div>
</div>
</div>
How can I fix this? Thanks for any feedback and suggestion

Answer 1

Your .item has a minus margin which leads to your problem. Replacing the css with this fixes the problem:
.item {
margin: 0;
}
I don't know why this would be happening though. It's the ionic basic css. I guess it's their way of dealing or should I say hiding the left and right border of an item.