Fix simple grid bug Issue:#304

[adebiyial]

What does this PR do?

This PR fixes Issue:#304

The cards in the grid (on the homepage and projects page) are no longer overflowing the grid container's boundary. The cards are also distributed better now. 3/2/1 columns on different screen sizes.

Type of change

• [x] Bug fix (non-breaking change which fixes an issue)

How should this be tested?

Testing should be done on responsiveness.

Checklist

Required

• [x] Filled out the "How to test" section in this PR
• [x] Self-reviewed my own code
• [x] Ran npm run build
• [x] Checked for warnings, there are none
• [x] Removed all console.logs
• [x] Merged the latest changes from main onto my branch with git pull origin main
• [x] My changes don't cause any responsiveness issues

Appreciated

• [x] If a UI change was made: Added a screen recording or screenshots to this PR

https://github.com/acekyd/made-in-nigeria/assets/18689106/0103cd36-da10-4646-889b-806ef02422b9

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

[netlify[bot]]

👷 Deploy Preview for made-in-nigeria-dev processing.

Name	Link
🔨 Latest commit	e62c5a400287c172b49540fd5efffd25cccb93e2
🔍 Latest deploy log	https://app.netlify.com/sites/made-in-nigeria-dev/deploys/65f5dd16db652100083b7950