Misaligned Cards on "Pet News" Page in Different Screen Sizes

## Description
On the "Pet News" page, the cards containing news articles are not aligned properly on mobile view, making it difficult for users to read the content with proper alignment. The information overflows and extends beyond the screen when hovering over news articles, requiring horizontal scrolling to read the information clearly.

## To Reproduce
Steps to reproduce the behavior:
1. Click on "Pet News" in the navigation bar.
2. Navigate to the "Pet News" page.
3. Hover over any news article.
4. Observe the alignment and overflow issue.

## Expected Behavior
When hovering over the news articles, the information should enhance in size but should not overflow and extend beyond the screen. Users should be able to read the information without the need for horizontal scrolling.

## Screenshots
Mobile and Tablet:

Desktop:

## Environment
- Browser: Chrome

## Additional Context
Please assign me this issue under GSSOC23. I have prior experience in solving similar bugs on various projects, and I believe I can resolve this issue to improve user experience and satisfaction.