[BUG]: Website layout does not fill the entire screen width inside browser window

[vishnunandan555]

Bug Description

When viewing the website on a my browser window, the content is stuck in a narrow box in the middle. There are large empty black bars on both the left and right sides of the page. The website doesn't seem to expand to use the full space available in the browser.

Steps to Reproduce

1. Open the website in a web browser.
2. Maximize the browser window
3. Observe the large empty spaces on the sides of the main content.
   (Screenshot given is localhost but its exactly same on hosted website also)

Logs and Screenshots

Environment Details

OS: Fedora Linux
Browser: Firefox (and others)
Screen Resolution: 1920x1080

Impact

Low - Minor inconvenience

Code of Conduct

• I have joined the Discord server and will post updates there
• I have searched existing issues to avoid duplicates

[vishnunandan555]

I did some analysis on why the website has large black bars.
The issue is caused by the max-w-7xl constraint and padding in our global layout.jsx and Container.jsx files, which lock the website's maximum width to 1280px.

I tried to fix this by simply removing the max-w and padding classes to force it to be full-width.
However, this didn't work properly, its breaking the layout (especially first initial page) it completely broke the layout and messed up the alignment.

Also, applying that global change ruined the layout for the other pages (like About and Projects), we would have all those mini boxes touching the left and right screen edges without any padding which doesn't look good.

We need to completely separate the Home Page's styling from the rest of the website. We have to give the Home Page its own specific full-width background setup, while making sure the other pages safely stay inside the original boxed layout safely (with max-width as full/removed).

It's a bit out of scope for a quick fix right now. Someone more qualified with Next.js layouts should probably look into this issue

[imChinmoy]

Hi, I would like to work on this issue.
I’ve analyzed the layout problem and can work on fixing the responsive container behavior so the website properly utilizes the available screen width across different viewport sizes.

Please assign this issue to me. Thanks!

[Jash-Khunt]

I’d love to work on this issue and contribute a fix.
From the screenshot and description, it looks like the layout/container width is constrained on larger screens, leading to unused horizontal space. I’ll investigate the responsive CSS and ensure the page properly utilizes full-width displays across browsers.

Could you please assign this issue to me?