I'm currently working on a project that requires me to apply a specific responsive design using HTML Bootstrap classes. I've managed to format it the way I want, but I'm puzzled as to why the width of my cards within rows is inconsistent in desktop view. Can anyone help me figure out what might be causing this issue? For reference, here's the full HTML document with the section starting at "!Bottom Section". Unfortunately, I am not permitted to write any custom CSS for this assignment, so only HTML is used. Thank you for your assistance.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>All about bears</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<header class="bg-info">
<h1 class="pt-4 pl-5">All About Bears</h1>
<p class="pb-4 pl-5">Read all about bears and what they're like.</p>
<nav class="text-center mb-4 bg-light py-3">
<a href="#" class="text-dark px-3">Home</a>
<a href="#" class="text-dark px-3">About</a>
<a href="#" class="text-dark px-3">Contact</a>
</nav>
</header>
<main class="pl-4">
<!--Top Section-->
<div class="row px-lg-5 col-sm">
<img class="img-fluid" src="https://placebear.com/490/480"/>
<section class="col px-lg-5 row-sm">
<h2 class="text-center py-3 mb-3">Bears are neat!</h2>
<p class="px-lg-5">Thejk jkee soodjkfd jkl djfedios nkjf de. fjkdosdjd ficklsldf ddfe. jjkldif jjf asope mekdox kididlwne df.
asdjdfv ioejfdslkcj fdiolsmefjd klfdslkjdf. djfid soox ejf jf dic ciciic deksj zjdklfdd. jsklddox jjifke sjzo.
sdjidfox.
</p>
<p class="px-lg-5"> Ddod co e nfdklooox djfed sox dofdds f od poof fjso f dfds. hejk didof sdjdof. dis
sdidof dfjdsioxxoxodfd sjfo, eiw wod jjofdfdwo sdfo. jkee soodjkfd jkl djfedios nkjf de. fjkdosdjd ficklsldf ddfe. jjkldif jjf asope mekdox kididlwne df.
asdjdfv ioejfdslkcj fdiolsmefjd klfdslkjdf.
</p>
<p class="px-lg-5">Thejk jkee soodjkfd jkl djfedios nkjf de. fjkdosdjd ficklsldf ddfe. jjkldif jjf asope mekdox kididlwne df.
asdjdfv ioejfdslkcj fdiolsmefjd klfdslkjdf. jdkdfjoejfds fjef sdfjo sod qpd fjoxf feea dsj sdf. dsjods jofej djozfjox.
</p>
<a class="pl-lg-5 pt-4 mt-4 text-dark" href="#">Source</a>
</section>
</div>
<hr>
<!--Bottom Section-->
<div class="row justify-content-center">
<!--First Row-->
<div class="row row-cols-6 d-flex justify-content-center justify-content-around mb-4">
<!--Card One-->
<section class="col col-4 border card p-0 mx-4">
<img class="img-fluid" src="https://placebear.com/225/225"/>
<p class="card-body">These bears are playing around</p>
<button class="card-body bg-primary p-lg-2 m-2 rounded text-light">See more bears</button>
</section>
<!--Card Two-->
<section class="col col-4 border card p-0 mx-4">
<img class="img-fluid" src="https://placebear.com/225/224"/>
<p class="card-body">This bear is looking off into the distance</p>
<button class="card-body bg-primary p-lg-2 m-2 rounded text-light">See more bears</button>
</section>
<!--Second Row-->
</div>
<div class="row row-cols-6 d-flex justify-content-center justify-content-around mb-4">
<!--Card Three-->
<section class="col col-4 border card p-0 mx-4">
<img class="img-fluid" src="https://placebear.com/225/223"/>
<p class="card-body">This bear just found some food</p>
<button class="card-body bg-primary p-lg-2 m-2 rounded text-light">See more bears</button>
</section>
<!--Card Four-->
<section class="col col-4 border card p-0 mx-4">
<img class="img-fluid" src="https://placebear.com/225/222"/>
<p class="card-body">This bear is one of our favorites</p>
<button class="card-body bg-primary p-lg-2 m-2 rounded text-light">See more bears</button>
</section>
</div>
</div>
</main>
</body>
</html>
Here are images showing the variation in pixel widths: