Having trouble centering a Single Row of Horizontal Scrolling Cards.
I've tried: a) the mx-auto class b) using text-align: center
Nothing seems to be working and there's a lot of space on the right side in desktop view.
Interestingly, the scrolling div is perfectly centered on mobile screens.
Any advice from experts on the right approach would be highly appreciated.
https://i.sstatic.net/kuhrI.png
https://i.sstatic.net/xBErW.png
<style>
img {
border-radius: 50%;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
margin-top: 5px;
}
.forlabel {
margin-top:-12px;
}
.forlabeldiv {
border:solid;
border-width:1px;
border-radius:5px;
<!-- margin-left:5px;
margin-right:5px;
margin-bottom:15px;-->
margin: 0,auto;
width:100%;
text-align:center;
}
.forlabelspan {
color: #0275d8;
background:white;
font-size:14px;
font-weight:800;
}
.btn {
width:30%;
text-align: center
margin-bottom:5px
}
.card-block {
min-height: 25vh;
margin-bottom:15px;
}
.profile, .card {
background:#ced7df!important;
text-align:center;
}
.master {
text-align:center;
margin: 0,auto;
}
</style><!DOCTYPE html>
<html lang="en">
<head>
<title>Single Row Horizontal Scrolling Cards</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!----------------------xxxxxxx---------------------------->
<h2>Single Row Horizontal Scrolling Cards</h2>
<div class="container-fluid p-3 m-3 master" >
<div class="container forlabeldiv row max-auto" >
<label for="input1" class="col-sm-2 forlabel" >
<span class=" forlabelspan">Expert Panel</span>
</label>
<div class="row flex-nowrap overflow-auto ">
<div class="col-12 col-lg-6" >
<div class="card card-block profile" >
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100" >
First Name Last Name<br>
Title of Person<br>
Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto">BOOK</a>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card card-block " style="text-align: center" >
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100" >
First Name Last Name<br>
Title of Person<br>
Credentials of Person<br>
<a href="#" class="btn btn-danger mx-auto">BOOK</a>
</div>
</div>
... and so on
</div> <!--*** end of row flex *** -->
</div> <!--*** end of label div *** -->
</div> <!--*** end of container-flex -->
<!----------------------xxxxxxx---------------------------->
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c6c736c6c796e32766f5c2d322d2a322d">[email protected]</a>/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1a3aeaeb5b2b5b3a0b181f5eff7eff3">[email protected]</a>/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76141919020502041706364258405844">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>