Struggling with a horizontal scroll in React using CSS. Trying to showcase a list of cards horizontally, but can't get the left edge to display properly. Attached is a screenshot highlighting the issue. The first card in the list is not displaying correctly. Using ant design to create the cards.
https://i.sstatic.net/reRaY.png
Below is the JavaScript and CSS code for that section:
<div className={styles.subjectArea}>
<Card
hoverable
style={{ width: '219px', height: '248px', margin: 10, borderRadius: '10px', textAlign: 'center', fontWeight: 'bold' }}
cover={<img alt="example" src="https://i.pinimg.com/originals/bc/4f/e5/bc4fe5e81c387c9c1c0144caf0299ba9.jpg" style={{ objectFit: 'cover', height: '180px', borderRadius: '10px 10px 0px 0px' }} />}
>
<Meta title="Science" style={{ fontWeight: '900', margin: '-10px 0px -100px 0px' }} />
</Card>
//Other cards removed for simplicity
</div>.subjectArea {
padding: 20px;
min-width: 100%;
min-height: 300px;
background: #FFFFFF;
border: 1px solid rgba(133, 77, 206, 0.25);
box-sizing: border-box;
border-radius: 8px;
display: flex;
justify-content: space-around;
align-items: center;
overflow: auto;
overflow-y: hidden;
margin-top: 20px;
}Any suggestions on how to ensure the first card is fully visible when scrolled to the left?