Fix Card Grid Layout to Eliminate Empty Space on the Right Side

Currently, in the "Courses" section of the profile page, the card grid layout is leaving a noticeable empty space on the right-hand side of the screen, as shown in the attached screenshot. This occurs because the card sizes and grid configuration do not fully utilize the available horizontal space within the container.

The existing layout seems to use fixed card widths or a grid template that does not adapt dynamically to varying screen sizes. As a result, when the viewport width does not perfectly fit an exact number of cards per row, the final column remains empty, causing wasted space and an imbalanced visual appearance.

Additionally, when the card width becomes smaller (such as on narrower screens or when more cards are fitted per row), the text or content inside the cards should not overflow outside the card boundary. Instead, it should be truncated or otherwise handled properly to maintain a clean, consistent appearance without breaking the layout.

Proposed Solution:

• Implement a responsive grid layout using CSS Grid or Flexbox that adjusts the number of cards per row based on the viewport width.

• Use grid-template-columns: repeat(auto-fill, minmax(...)) or a similar approach to ensure that cards expand or contract proportionally to fill the row without leaving gaps.

• Adjust card padding/margins to maintain consistent spacing while still achieving a visually balanced grid.

• Ensure text and content within cards are truncated or wrapped correctly to prevent overflow when cards are narrower.

• Consider implementing breakpoints for different device sizes to ensure the layout looks equally good on laptops, desktops, and large monitors.
  

Expected Outcome:
Once fixed, the card grid should adapt seamlessly to fill the available space in each row, removing any awkward empty columns. Text and other content inside the cards should be handled gracefully when card widths are reduced, ensuring no overflow occurs. This will enhance the visual appeal, improve the user experience, and make better use of screen real estate.