I am struggling to make all the cards display in a single row when the device screen size is larger than lg, and have them stacked on top of each other when the screen size is smaller. Despite my efforts, I can only get 2 cards to appear in a single row even though I divided the row into 4:4:4. Furthermore, when the device size is reduced, the cards stack properly but their width exceeds the bounds and does not decrease with the screen size reduction, even after specifying col-12. I tried using border-boxing, but it did not work. As a newcomer to HTML, any assistance would be greatly appreciated.
body {
background-image: linear-gradient(to right, rgb(38, 123, 252), rgb(87, 171, 226));
}
.box {
background-color: white;
border-radius: 10px;
box-sizing: border-box;
word-wrap: break-word;
}
.heading {
text-align: center;
font-size: 40px;
}
.top {
color: grey;
font-size: 15px;
text-align: center;
margin-bottom: 5px;
}
ul {
list-style: none;
font-size: 15px;
text-align: left;
padding-left: 0px;
/* letter-spacing: .1rem; */
}
ul.cross {
color: grey;
}
ul.tick {
margin-bottom: 0px;
}
ul.tick li:before {
content: '✓';
font-size: 20px;
font-weight: 100;
padding-right: 5px;
}
ul.cross li:before {
content: 'x';
font-size: 20px;
font-weight: 100;
padding-right: 5px;
color: grey;
}<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac8c5c5ded9ded8cbdaea9e849c849a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Price tag</title>
</head>
<body>
<div class="container ">
<div class="row ">
<div class="col-lg-4 col-12 box my-5 mx-5 mx-lg-2">
<p class="top">FREE</p>
<p class="text-center"><span class="heading">$0</span><span>/month</span>
<hr/>
</p>
<ul class="tick">
<li>Single User</li>
<li>5GB Storage</li>
<li>Unlimited Public Projects</li>
<li>Community Access</li>
</ul>
<ul class="cross">
<li>Unlimited Private Projects</li>
<li>Dedicated Phone Support</li>
<li>Free Subdomain</li>
<li>Monthly Status Reports</li>
</ul>
</div>
<div class="col-lg-4 col-12 box my-5 mx-5 mx-lg-2 ">
<p class="top">FREE</p>
<p class="text-center"><span class="heading">$0</span><span>/month</span>
<hr/>
</p>
<ul class="tick">
<li>Single User</li>
<li>5GB Storage</li>
<li>Unlimited Public Projects</li>
<li>Community Access</li>
</ul>
<ul class="cross">
<li>Unlimited Private Projects</li>
<li>Dedicated Phone Support</li>
<li>Free Subdomain</li>
<li>Monthly Status Reports</li>
</ul>
</div>
<div class="col-lg-4 col-12 box my-5 mx-5 mx-lg-2 ">
<p class="top">FREE</p>
<p class="text-center"><span class="heading">$0</span><span>/month</span>
<hr/>
</p>
<ul class="tick">
<li>Single User</li>
<li>5GB Storage</li>
<li>Unlimited Public Projects</li>
<li>Community Access</li>
</ul>
<ul class="cross">
<li>Unlimited Private Projects</li>
<li>Dedicated Phone Support</li>
<li>Free Subdomain</li>
<li>Monthly Status Reports</li>
</ul>
</div>
</div>
</div>