[BUG] So much Misalignment of Elements and Duplicate Components (Volume Bar, Theme Toggle) Adjustment needed

[srishti023]

Description

I am facing alignment issues in the game where certain elements, are misaligned. Additionally, there are duplicate instances of these components in the HTML structure, which is causing further layout inconsistencies.

What I Tried:
I attempted to manually adjust the CSS styling for these elements, but the alignment still isn't working as expected.
I also tried restructuring the HTML to remove duplicates, but this led to unexpected behavior in the game interface.

we need to to implement correct structure and styling for better layout we need to use flexbox property .

I want to work on it please assign me this issue !

Screenshots

Problem :

I tried to make the sidebar section more structure with the help of correct html structuring and styling.

Result:

Overall the whole UI needs adjustment!

Any additional information?

No response

What browser are you seeing the problem on?

No response

Checklist

• I have checked the existing issues
• I have read the Contributing Guidelines
• I'm a GSSoC'24-Extd contributor
• I'm a Hacktoberfest'24 contributor
• I am willing to work on this issue (optional)

[anchalchaturvedi08]

Hello PA, I want to work on this issue. Can you assign it to me?