[BUG] Fix Content Overflow and Misalignment in Waste Management Section

[sahhoArjun097]

[BUG] Fix Content Overflow and Misalignment in Waste Management Section

Closes: #165

The "Waste Management" section had issues with content overflowing and misaligning, particularly on smaller screen sizes. This disrupted the layout and negatively affected the user experience, causing some text and elements to overflow outside their containers.

-Card Layout Adjustment: Updated the card structure to use flexbox for better alignment and dynamic resizing.

-Text Overflow Handling: Applied CSS properties like overflow-wrap and text-overflow to handle potential text overflow issues.

-Spacing & Padding: Adjusted margins and padding for better consistency across cards and between elements.

-Mobile Optimization: Added media queries to ensure the layout is responsive and readable on smaller screens, preventing
any misalignment or overflow issues.

Please check the boxes that apply

• Bugfix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update (Documentation content changed)
• Other (please describe):

Checklist

Please check the boxes that apply

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• My changes do not break the current system and pass all existing test cases
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

bandicam.2024-10-09.20-32-10-421.mp4

Please assign this issue to me as I would like to work on fixing it. also add the label GSSoC 2024 Extd relaevant and lvl .