after the timeline must not override width. Sections are allowed to be full-width backgrounds — but their INNER container must respect max-width. ============================================================ */ section { width: 100%; max-width: 100%; overflow-x: hidden; box-sizing: border-box; } /* Specific sections known to break layout */ .service-pricing, .service-packages, .service-process, .service-faq, .service-portfolio, .service-testimonials, .service-cta, .service-related, .service-contact, .pricing-section, .packages-section, .process-section, .faq-section, .portfolio-section, .testimonials-section, .cta-section, .related-section, .contact-section, #pricing, #packages, #process, #faq, #portfolio, #testimonials, #cta, #related-services, #contact-section { width: 100%; max-width: 100%; /* sections span full background width */ overflow-x: hidden; box-sizing: border-box; position: relative; /* keeps absolute children in scope */ } /* Inner containers inside those sections */ .service-pricing > .container, .service-packages > .container, .service-process > .container, .service-faq > .container, .service-portfolio > .container, .service-testimonials > .container, .service-cta > .container, .service-related > .container, .service-contact > .container, .pricing-section > .container, .packages-section > .container, .process-section > .container, .faq-section > .container, .portfolio-section > .container, .testimonials-section > .container, .cta-section > .container, .related-section > .container, .contact-section > .container, #pricing > .container, #packages > .container, #process > .container, #faq > .container, #portfolio > .container, #testimonials > .container, #cta > .container, #related-services > .container, #contact-section > .container { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: clamp(1rem, 4vw, 5rem); padding-right: clamp(1rem, 4vw, 5rem); width: 100%; box-sizing: border-box; } /* ============================================================ 4. KILL FULL-WIDTH / 100VW WRAPPERS Remove any class that forces elements beyond the container. ============================================================ */ .full-width, .w-full-vw, [class*="full-width"], [class*="fullwidth"], [class*="w-screen"], [style*="width: 100vw"], [style*="width:100vw"], [style*="max-width: none"], [style*="max-width:none"] { /* Undo the full-width only when inside a service page section */ max-width: 100% !important; } /* * Exception: header, footer, nav and decorative full-bleed * backgrounds are intentionally full width — do not constrain them. */ header, footer, nav, .site-header, .site-footer, .hero-bg, .section-bg, .timeline-bg, [class*="hero-section"], [class*="header"], [class*="footer"] { max-width: none !important; width: 100%; } /* ============================================================ 5. SERVICE PAGE BODY LAYOUT The service page uses a two-column layout: LEFT: sticky sidebar (services nav) RIGHT: main content After the timeline the main content column must stay within its grid column — not escape to full viewport width. ============================================================ */ .service-layout, .service-body, .service-page-body, .page-layout, [class*="service-layout"], [class*="page-body"] { display: grid; grid-template-columns: 260px 1fr; gap: 0; width: 100%; max-width: 1280px; margin: 0 auto; align-items: start; box-sizing: border-box; } /* Sidebar column */ .service-sidebar, .sidebar, [class*="sidebar"] { width: 260px; flex-shrink: 0; position: sticky; top: 80px; /* height of sticky header */ align-self: start; max-height: calc(100vh - 80px); overflow-y: auto; box-sizing: border-box; } /* Main content column — never exceeds its grid cell */ .service-content, .service-main, .main-content, [class*="service-content"], [class*="main-content"] { min-width: 0; /* critical: prevents grid blowout */ width: 100%; overflow-x: hidden; box-sizing: border-box; } /* ============================================================ 6. REMOVE DUPLICATE NESTED CONTAINERS If a .container is inside another .container, remove the inner padding to avoid double-indenting content. ============================================================ */ .container .container { padding-left: 0; padding-right: 0; max-width: 100%; } .service-content .container { padding-left: 0; padding-right: 0; max-width: 100%; } /* ============================================================ 7. PRICING CARDS GRID FIX Pricing section is the most common section to overflow because card grids use min-width that can exceed the column. ============================================================ */ .pricing-cards, .pricing-grid, .packages-grid, [class*="pricing-card"], [class*="plan-card"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.5rem; width: 100%; box-sizing: border-box; } /* Ensure individual cards never set a fixed width wider than parent */ .pricing-card, .plan-card, [class*="pricing-card"], [class*="plan-card"] { min-width: 0; width: 100%; box-sizing: border-box; } /* ============================================================ 8. PORTFOLIO / IMAGE GRID FIX Portfolio grids on service pages commonly escape container due to fixed pixel widths on images. ============================================================ */ .portfolio-grid, .project-grid, [class*="portfolio-grid"], [class*="project-grid"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 1.5rem; width: 100%; box-sizing: border-box; } .portfolio-grid img, .project-grid img, [class*="portfolio-grid"] img, [class*="project-grid"] img { width: 100%; height: auto; display: block; object-fit: cover; } /* ============================================================ 9. FAQ ACCORDION FIX FAQ items sometimes set width: 100vw via JS or inline style. ============================================================ */ .faq-item, .accordion-item, [class*="faq-item"], [class*="accordion-item"] { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; } .faq-answer, .accordion-content, [class*="faq-answer"], [class*="accordion-content"] { width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; } /* ============================================================ 10. RELATED SERVICES SECTION FIX ============================================================ */ .related-services, [class*="related-services"] { width: 100%; max-width: 100%; overflow-x: hidden; } .related-services-grid, [class*="related-services"] .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1.5rem; width: 100%; box-sizing: border-box; } /* ============================================================ 11. CTA SECTION FIX CTA sections often use full-width backgrounds with inner content that should still be constrained to 1280px. ============================================================ */ .cta-section, .service-cta, [class*="cta-section"], [class*="service-cta"] { width: 100%; position: relative; overflow: hidden; } .cta-section .container, .service-cta .container, [class*="cta-section"] .container, [class*="service-cta"] .container { max-width: 1280px; margin: 0 auto; padding-left: clamp(1rem, 4vw, 5rem); padding-right: clamp(1rem, 4vw, 5rem); position: relative; z-index: 1; } /* ============================================================ 12. TESTIMONIALS SECTION FIX ============================================================ */ .testimonials-section, [class*="testimonials"] { width: 100%; overflow-x: hidden; } .testimonial-grid, [class*="testimonial-grid"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.5rem; width: 100%; box-sizing: border-box; } /* ============================================================ 13. PROCESS / TIMELINE SECTION The timeline itself can be full-width (decorative connector lines span the row) but the step content must stay contained. ============================================================ */ .process-section, .timeline-section, .how-we-work, #how-we-work, [class*="process-section"], [class*="timeline"] { width: 100%; overflow-x: hidden; } .process-section .container, .timeline-section .container, .how-we-work .container { max-width: 1280px; margin: 0 auto; padding-left: clamp(1rem, 4vw, 5rem); padding-right: clamp(1rem, 4vw, 5rem); } .process-steps, .timeline-steps, [class*="process-steps"], [class*="timeline-steps"] { display: flex; gap: 1rem; width: 100%; box-sizing: border-box; overflow-x: auto; /* allow horizontal scroll INSIDE */ -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.5rem; } .process-steps::-webkit-scrollbar { display: none; } .process-step, .timeline-step, [class*="process-step"] { flex: 1 0 auto; min-width: min(160px, 100%); box-sizing: border-box; } /* ============================================================ 14. PAYMENT BADGES / TRUST SIGNALS Small inline elements that sometimes wrap oddly. ============================================================ */ .payment-badges, .trust-signals, [class*="payment-badge"], [class*="trust-signal"] { display: flex; flex-wrap: wrap; gap: 0.75rem; width: 100%; box-sizing: border-box; } /* ============================================================ 15. RESPONSIVE OVERRIDES Verify consistent spacing on all breakpoints. ============================================================ */ /* Mobile — 320px to 639px */ @media (max-width: 639px) { .service-layout, .service-body, .page-layout { grid-template-columns: 1fr; } .service-sidebar, .sidebar { display: none; /* sidebar hidden on mobile, hamburger nav used */ } .service-content, .main-content { width: 100%; min-width: 0; padding: 0; } .container, .page-container, .section-container { padding-left: 1rem; padding-right: 1rem; } .pricing-cards, .pricing-grid { grid-template-columns: 1fr; } .portfolio-grid, .project-grid { grid-template-columns: 1fr; } .related-services-grid { grid-template-columns: 1fr; } .process-steps { flex-direction: column; overflow-x: visible; } } /* Tablet — 640px to 1023px */ @media (min-width: 640px) and (max-width: 1023px) { .service-layout, .service-body { grid-template-columns: 1fr; } .service-sidebar { display: none; /* collapsible drawer on tablet */ } .container { padding-left: 2rem; padding-right: 2rem; } .pricing-cards, .pricing-grid { grid-template-columns: repeat(2, 1fr); } .portfolio-grid { grid-template-columns: repeat(2, 1fr); } .related-services-grid { grid-template-columns: repeat(2, 1fr); } } /* Laptop — 1024px to 1279px */ @media (min-width: 1024px) and (max-width: 1279px) { .service-layout, .service-body { grid-template-columns: 240px 1fr; } .service-sidebar { width: 240px; } .container { padding-left: 3rem; padding-right: 3rem; } } /* Desktop — 1280px and above */ @media (min-width: 1280px) { .service-layout, .service-body { grid-template-columns: 260px 1fr; } .container { padding-left: 5rem; padding-right: 5rem; } } /* Large Desktop — cap at 1280px, center everything */ @media (min-width: 1440px) { .container, .service-layout, .service-body { max-width: 1280px; margin-left: auto; margin-right: auto; } } /* ============================================================ 16. HORIZONTAL SCROLL DEBUG UTILITY Add class="debug-overflow" to temporarily to highlight any element causing overflow. Remove before shipping. ============================================================ */ /* .debug-overflow * { outline: 1px solid rgba(255, 0, 0, 0.2); } .debug-overflow *:has(> *:not(style):not(script)) { overflow-x: visible !important; } */