When viewing my website on mobile, there is a horizontal scroll that displays three divs like cards. The horizontal scroll functions correctly, except for the last div whose right margin of 6px is not visible. All three divs have margin-left: 6px and margin-right: 6px;
Here's the left margin displaying correctly:
https://i.sstatic.net/L53hC.png
And here's the issue with the right margin not showing at all:
https://i.sstatic.net/3aXSb.png
@media only screen and (max-width: 480px) {
/* Html */
html {
overflow: scroll;
overflow-x: hidden;
}
/* Cards */
.mobile-card-container>.row {
overflow-x: auto;
}
.mobile-card-container {
display: block;
}
.card-background {
height: 100px;
background-color: #ffffff;
border-radius: 6px;
margin-top: 16px;
-webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
-moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
margin-left: 6px !important;
margin-right: 6px !important;
}
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<html>
<body>
<!-- Simulaciones Default -->
<div class="row">
<!-- Mobile Card Container -->
<div class="col-12 mobile-card-container container-fluid" style="border: 1px solid;">
<div class="row flex-nowrap flex-sm-wrap" style="border: 1px solid red;">
<!-- Card 1 -->
<div class="col-10 card-background simulacion mx-auto">
Card 1
</div>
<!-- Card 2 -->
<div class="col-10 card-background simulacion mx-auto">
Card 2
</div>
<!-- Card 3 -->
<div class="col-10 card-background simulacion mx-auto">
Card 3
</div>
</div>
</div>
<!-- /Mobile Card Container -->
</body>
</html>