# Fix main content width on mobile devices

**Task ID:** 009
**Date Created:** 2025-07-08
**Author:** Gemini

---

## Task Description

The main content area of the landing page does not extend to the full width of the screen on mobile devices, leaving a white bar on the side. This task is to fix the styling to ensure the main content utilizes the entire screen width.

---

## Instructions

- Identify the CSS rule or element style causing the width issue.
- Modify the appropriate CSS file to ensure the main content area spans the full width.
- Verify the fix on mobile screen sizes.

---

## Input Data

- Image of the issue: `ai_docs/images/failire_main_not_full_with.png`

---

## Expected Output

- The main content area should be full-width on mobile devices, with no horizontal white space.

---

## Constraints & Requirements

- The fix should not negatively impact the layout on desktop devices.

---

## References (Optional)

- `src/app/layout.tsx`
- `src/app/globals.css`

---

## Metadata

| Key             | Value            |
|-----------------|------------------|
| Priority        | High             |
| Status          | Done             |
| Tags            | CSS, Mobile, Fix |

---