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

[sahhoArjun097]

Description

The "Waste Management" section has an overflow issue where content extends beyond the designated layout boundaries, making the text appear misaligned and causing parts of it to be cut off. This is particularly noticeable in the section where the red text ("9% of plastic ever produced has been recycled?") overlaps with other content, creating readability and design problems.

Steps to Reproduce

Fix the overflow by ensuring that all elements stay within their respective containers or div blocks.

Adjust margins and padding to provide adequate spacing between the text and other elements.

Implement responsive design to ensure the content scales properly on different screen sizes.

Improve font alignment to ensure all text remains clear and readable within the section.

Expected Behavior

Proper Content Alignment: All text, images, and elements should stay within the designated sections without overflowing or overlapping. The layout should look neat and well-organized, with the text properly wrapped within its container.

Actual Behavior

Overflow Issue: The content (particularly the red text) extends beyond the layout's intended boundaries, making it difficult to read and giving the section a cluttered appearance.

Misalignment of Text: Some text is misaligned, causing it to appear outside its container, overlapping other elements, and breaking the visual flow of the design.

Lack of Padding and Margins: There is insufficient spacing between elements, which leads to a cramped and disorganized look.

Additional Information

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

Browser

Firefox

Checklist

• I have checked the existing issues.
• I have read the Code Of Conduct
• The changes don't break the code
• Please attach screenshots and videos of the development work once done