🐛 Tiger Website - Background shifts left on smaller screen sizes on SSW.Tiger website

Requested by: @hveraus via YakShaver.ai 🦬
cc: @hveraus, @suiyangqiu, @yaqi-lyu, @calumjs, @joshbermanssw

Hi Team!

  🟥  Watch the video (37 sec)

  Url from screen share: https://sswtiger.com

Pain

When viewing the SSW.Tiger website on smaller screen sizes, the background shifts to the left, exposing a hard vertical edge instead of remaining centered and responsive. This issue does not occur on large screens and negatively impacts visual consistency and user experience on smaller devices or resized browser windows.

Acceptance Criteria

1. The background remains centered and fills the viewport correctly across all screen sizes.
2. No hard vertical edges or background cut-offs are visible when resizing the browser window.
3. The issue is resolved on common breakpoints (desktop, tablet, and mobile).
4. The fix does not negatively impact the appearance on large screens.

Reproduce Steps

1. Navigate to the SSW.Tiger website on a desktop browser.
2. View the site at a large screen size and confirm the background appears correct.
3. Gradually resize the browser window to a smaller width.
4. Observe the background shifting to the left and a hard edge becoming visible.

Screenshot

Figure: Background shifts left on small screens with visible hard edge

Start at https://sswtiger.com and reproduce the shift by resizing a desktop browser through desktop, tablet, and mobile widths. Locate the website's background styling and verify that it remains centered without hard edges or cut-offs at smaller sizes while preserving the large-screen appearance.