Hey there! I'm currently working with Next.js and have run into an issue where the page is overflowing on the right side for no apparent reason. This seems to be caused by an HTML/CSS card that I created, as depicted in the image below:
Here's the code snippet for 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>
....
And this is the corresponding CSS:
.Col a:hover{
text-decoration: none;
color: black;
}
.Row{
width: 80%;
margin: auto;
}
...
Any thoughts or suggestions on what might be causing this issue?