Html Css Card breaking page width for no reason - html

Question

enter image description here
Hello, I am using next js, and as you can see on the most right of the picture the page has an overflow for no reason and it's caused by an html CSS card I built as shown below in the photo. (I assumed it is because of the card because when I remove it the page works fine):
enter image description here
Below is the code of the card:
<div className={styles.container}>
<Row className={styles.Row}>
<Col data-aos="flip-right" className={styles.Col} sm={'auto'} >
<Link href={"/"}>
<a>
<div className={styles.aBox}>
<div className={styles.imgContainer}>
<div className={styles.imgInner}>
<div className={styles.innerSkew}>
<img src="./topbanner2.jpg" />
</div>
</div>
</div>
<div className={styles.textContainer}>
<h3>Flyer</h3>
<div>
This is a demo experiment to skew image container. It looks good.
</div>
</div></div></a></Link>
</Col>
<Col data-aos="flip-right" className={styles.Col} sm={'auto'} >
</Col>
....
below is the css:
.Col a:hover{
text-decoration: none;
color: black;
}
.Row{
width: 80%;
margin: auto;
}
.Col{
padding: 10px !important;
margin: auto;
text-align: center;
overflow-x: hidden !important;
}
.aBox {
display: inline-block;
width: 240px;
text-align: center;
box-sizing:content-box;
}
.aBox:hover{
.textContainer{
border:#04bcff solid 1px
}
}
.imgContainer {
height: 230px;
width: 200px;
overflow: hidden;
border-radius: 0px 0px 20px 20px;
display: inline-block;
}
.imgContainer img {
/* transform: skew(0deg, -13deg); */
height: 250px;
width: 100%;
object-fit: cover;
/* margin: -35px 0px 0px -70px; */
}
.innerSkew {
display: inline-block;
border-radius: 20px;
overflow: hidden;
padding: 0px;
/* transform: skew(0deg, 13deg); */
font-size: 0px;
margin: 30px 0px 0px 0px;
background: #c8c2c2;
height: 250px;
width: 200px;
}
.textContainer {
border:transparent solid 1px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
padding: 120px 20px 20px 20px;
border-radius: 20px;
background: #fff;
margin: -120px 0px 0px 0px;
line-height: 19px;
font-size: 14px;
transition: 0.25s border ease-in-out;
}
.textContainer h3 {
margin: 20px 0px 10px 0px;
color: #04bcff;
font-size: 18px;
}
Any suggestions what would be it?

Answer 1

Add
body * {outline:1px solid red;}
to the CSS file to see the overflowing component.
Pls this trick I learned from Kevin Powell (search him on YouTube)