[Bug]: Map overflowing outside container in footer section(JWOC)

[arnab9957]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

---

name: Layout Overflow - Map Section
about: Report layout issues related to map or embedded content overflow
title: "[Layout Bug]:

labels: bug, layout, ui
assignees: ''

🐛 Description

The embedded map in the Address section is overflowing outside the intended container boundary. The map extends beyond the purple background area, breaking the layout alignment.

---

📍 Location

• Page: (e.g., Home / Footer Section)
• Section: Address / Map Embed
• File: (e.g., index.html / footer.css)

---

📸 Screenshot

---

💻 Steps to Reproduce

1. Open the homepage
2. Scroll to the footer section
3. Observe the embedded map extending beyond the container width

---

✅ Expected Behavior

The map should:

• Stay within the container width
• Align with the page layout
• Be fully responsive
• Not overflow horizontally

---

❌ Actual Behavior

• Map extends beyond the parent container
• Breaks layout alignment
• Causes horizontal visual overflow

---

🔍 Possible Cause

• Missing max-width
• width: 100% without constrained parent
• Parent container not centered
• Overflow not controlled
• Improper iframe styling

---

🛠 Suggested Fix

Example CSS fix:

.map-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.map-container iframe {
  width: 100%;
  height: 300px;
  border: 0;
}


### Expected behavior

The map should:
- Stay within the container width
- Align with the page layout
- Be fully responsive
- Not overflow horizontally

### Add ScreenShots/Videos

<img width="1378" height="598" alt="Image" src="https://github.com/user-attachments/assets/f7da105a-d0c6-46c3-9efe-a39b67291aef" />

### On which device are you experiencing this bug?

_No response_

### Record

- [x] I have read the Contributing Guidelines
- [ ] I'm a  KWOC 2025-26 contributor
- [ ] I'm a  SWOC 2026 contributor
- [x] I have starred the repository

[github-actions]

👋 Thanks for opening this issue! We appreciate your contribution. Please make sure you’ve provided all the necessary details and screenshots, and don't forget to follow our Guidelines and Code of Conduct. Happy coding! 🚀

[arnab9957]

I want to work on this issue.

[ny798299-design]

@apu52 I would like to work on this issue .

[saurabhhhcodes]

I'd like to work on this issue. Please assign it to me.