Layout Issue: Full-Width Section Alignment with 1200px Content Box Cap

[Ubayed-Bin-Sufian]

Description

A specific section ("About Section") requires an unusual layout configuration: the content (text/info box) must strictly adhere to the site's global 1200px content width, while the container (containing a background image) must span the full browser width (100vw).

The standard Astra settings (using percentages for container widths and fixed padding for alignment) cause the content block to drift and misalign with the rest of the site's boxed content as the viewport scales beyond 1200px.

Setup

• Global Content Width: 1200px
• About Section Parent Container: Set to Full Width
• Two containers (70% | 30%)
  • Left container: Content/Info Box (.aligned-left-col)
  • Right container: Full-width background image

Required Behavior

1. Screens <= 1200px: Content must use a fixed 30px left padding (to align with the left edge of other content boxes).
2. Screens > 1200px (Standard Desktop up to 1920px): Content must align perfectly with the 1200px content grid line, using dynamic padding.
3. Screens > 1920px (4K/Ultra-Wide): The dynamic padding must be capped at 200px (the required margin for 1200px content on a 1920px screen) to prevent the text from floating excessively in the screen center.

[Ubayed-Bin-Sufian]

Solution for Full-Width Image + Perfect Text Alignment in Astra

It uses Astra settings to handle the full-width image and a specific CSS formula (calc()) to mathematically force the text alignment to match your 1200px grid perfectly on any screen size.

---

Step 1: Clean Up Astra Settings

1. Edit Your Page and Select the About Section (Parent Container)

Layout Settings:

• Content Width: Set to Full Width
  (This ensures your right-side image hits the edge of the screen.)
• Width: Ensure it's 100% (or 1600px max if you prefer, but 100% is safest for background images).

2. Container Settings

Left Container (Info Box):

• Go to Advanced tab:
  • Remove:
    • Left Margin: 50px
    • Left Padding: 30px
    • Set both to 0
  • Add CSS Class:
    • aligned-left-col

Right Container (Background Image):

• Ensure:
  • Background image is applied here.
  • Container is set to fill remaining height and width.

---

Step 2: Apply the Alignment CSS

Add the following CSS to:

• WordPress Dashboard → Appearance → Customize → Additional CSS

/* * ASTRA CHILD THEME - ABOUT SECTION ALIGNMENT FIX
 * This ensures the content aligns with the 1200px grid, 
 * while the container remains full-width.
 */

/* Only apply this logic on screens wider than your content width (1200px) */
@media (min-width: 1201px) {
    .aligned-left-col {
        /* THE FORMULA:
           (Viewport Width - Content Width) / 2
           
           We use min() to cap the padding on 4K screens.
           - On standard desktops (1440px/1920px), it calculates strictly for 1200px alignment.
           - On 4K (2560px), it caps at 200px, 
             preventing the text from looking too detached or squeezed.
        */
        padding-left: min(calc((100vw - 1200px) / 2), 200px) !important;
        
    }
}

/* TABLET/MOBILE (1200px and below) */
@media (max-width: 1200px) {
    .aligned-left-col {
        /* Fixed 30px padding for Laptops (1024px) and Tablets */
        padding-left: 30px !important; 
        padding-right: 30px !important;
    }
}

[Ubayed-Bin-Sufian]

Prompt used (for reference)

I am using a child theme of the Astra theme in WordPress and I need help fixing a layout/alignment issue with my “About” section.
My global layout settings:

Container width: 1600px
Content width: 1200px
I built the About section with this structure:

About Section
├─ Container (custom width: 70px)
│ └─ Info Box (left margin: 50px)
└─ Container (custom width: 30px, background image applied)
Additional settings for the About section:

About Section → Spacing → Padding → Left: 30px
About Section → General → Content Width: Full Width
The issue:

This layout does not stay aligned correctly on screen sizes such as 1024px, 1440px, and 2560px (4K).

Other site sections using:
General → Content Width: Boxed
Content Box Width: 1200px
…scale perfectly and remain aligned.
What I need:

I want my About section to align and behave just like the other boxed sections—consistent padding, centering, and responsive scaling across all screen sizes.
Additional requirement:

One of the containers (Container 2) has a background image.

I want this background image to span the full width of the right side of the screen, not stay restricted inside the 1200px boxed width.

In boxed layout, the background image is limited to the content width, leaving empty space on the right, which is undesirable.
Question:

How can I configure this About section so that:
It aligns like other boxed sections (1200px content width), and
The right-side container’s background image stretches full-width across the screen?
I prefer a solution using Astra settings if possible, and CSS only if necessary.