I added a horizontal scroll in React, using the css, I want to display list of cards horizontally, But I can't scroll to the left edge completely. I have attached a SS below in that I have marked the problem in red.The marked card is the first card of the list, but it isn't display properly.I used ant design to create the cards.
![enter image description here](https://i.stack.imgur.com/reRaY.png)
Here is my js code and the css code for that part.
<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>
//There are many cards, but i have removed in here 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;
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…