How to remove padding for custom HTML section

Store Design

Topic summary

Goal: Remove left/right padding from custom HTML sections in Shopify’s Flow theme so these sections span full width on all screens.

Context: Responders requested preview URLs; the store’s home page preview was provided. Screenshots highlighted persistent side padding in three custom HTML sections.

Proposed solutions and outcomes:

  • Add CSS in theme-index.min.css to set .wrapper { max-width: 100% }; for the OP this caused no change.
  • Use a media query targeting specific section IDs to set .wrapper max-width: 100% !important; this made sections wider but not truly full-width (padding remained).
  • Zero internal padding on targeted section wrappers (e.g., #shopify-section-… .wrapper { padding: 0 !important; }) and adjust a #wallet element; OP has not confirmed effectiveness.
  • Force a grid class (.one-whole) to exceed 100% width with a negative left margin; no OP confirmation.

Status: No confirmed resolution from the OP. One other participant reported “Worked for me.” Further confirmation and possibly section-specific CSS adjustments appear needed.

Note: CSS code snippets placed in assets/theme-index.min.css are central to the fixes.

Summarized with AI on February 9. AI used: gpt-5.
15

@bwollrab

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme-index.min.css ->paste below code at the bottom of the file.
#wallet {
    justify-content: center !important;
    margin: 0 auto !important;
}

#shopify-section-1631621563eb86d5cc .wrapper {
    padding: 0 0px !important;
}

#shopify-section-1632223533f7d65239 .wrapper {
    padding: 0 0px !important;
}

Thanks!