In my mobile view, I have a horizontal scroll that holds three divs (like cards). The horizontal scroll works perfectly, however, the last div's right margin is not showing. It should show 6px. All three divs have margin-left: 6px and margin-right: 6px;
Here's the left margin showing correctly:
Here's the right margin not showing at all:
@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>