How to make row scroll (overflow) on x axis when reach max width

I want if more than max width it should be able to scroll. I tried setting the width to 100% and overflow-x:auto and white-space: nowrap as described in other stackoverflow posts but it doesnt work for bootstrap col. i also tried using flex and flex overflow and also tried by adding container-fluid but it still have same outcome although the scroll bar is showing but cannot scroll

For my current output, if col is more than 18 it will break and go to new line which is not what i want, i want it to be able to scroll instead break line into new row

<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
   <div class="container-fluid p-0">
      <div  style="width:100%; overflow-x:auto; white-space: nowrap;">
         <form id="TICKETSALE_ORDERTICKETSELECTSEATFORM" action="TICKETSALE_ORDERTICKETSELECTSEATFORM.php" method="POST">
            <div class="row row-eq-height mb-4 px-2 py-2" style="background-color:purple; height:40px;">
               <div class="col-sm-12" align="center">
                  <div class="row">
                     <div class="col-sm-12" >
                        <label class="text-center " style="color:white; font-weight:900;">SCREEN</label>
                     </div>
                  </div>
               </div>
            </div>
            <?php
                for($a=1; $a<=$row_Q1[0]['ROW']; $a++){
                    //row
            ?>
               <div class="row row-eq-height ">
            <?php
               for($b=1; $b<=$row_Q1[0]["COL"]; $b++){
                  //col
            ?>
               <div class="col">
            <?php
               $RowKeyExist = checkIfKeyExist($row_Q2, $a, $b);
                  if($RowKeyExist!== false){
            ?>
                     <div id=<?=$a.",".$b?>>
                        <div class="form-check pl-0">
                           <label class="fas fa-chair SEATIMAGE">
                           <?php
                              if($row_Q2[$RowKeyExist]["TICKETCODE"]=='1'){ //"1" is booked
                                 echo "style='font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630;  font-weight: 900;  color:grey;'";
                              }elseif($row_Q2[$RowKeyExist]["TICKETCODE"]=='2'){ //"2" is bought
                                 echo "style='font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630;  font-weight: 900;  color:red;'";
                              }elseif($row_Q2[$RowKeyExist]["TICKETCODE"]=='0'){ //"0" is temp bought in db and not current user
                                 echo "style='font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630;  font-weight: 900;  color:grey;'";
                              }elseif($row_Q2[$RowKeyExist]["TICKETCODE"]==null){ //"null" is vacant
                                 echo "style='font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630;  font-weight: 900;  color:green;'";
                              }
                           ?>
                           </label>
                           <div>
                              <label><?=$row_Q2[$RowKeyExist]["SEATLABEL"];?></label>
                           </div>
                        </div>
                     </div>
                  <?php
                     }else{
                  ?>
                     <div class="d-none">
                        <label class="fas fa-chair SEATIMAGE" style="font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630;  font-weight: 900;  color:purple;"></label>
                        <div>
                           <label>NONE</label>
                        </div>
                     </div>
                  <?php
                     }
                  ?>
                  </div>
               <?php
                  }
               ?>
               </div>
            <?php
               }
            ?>
         </form>
      </div>
   </div>
</div>

Here is a working example of what you want to achieve.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .my-div {
            width: 300px;
            background-color: red;
            color: white;
            border: 2px solid white;
            display: inline-block;
        }
    </style>
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12" style="overflow-x: scroll; white-space: nowrap;">
                <div class="my-div">
                    my div   
                </div>
                <div class="my-div">
                    my div
                </div>
                <div class="my-div">
                    my div
                </div>
                <div class="my-div">
                   my div
                </div>
                <div class="my-div">
                    my div
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>