Body Element does not stretch full width of page on responsive viewporst

Design help General
1

I’m in the middle stages of developing my website, and I noticed an issue I can’t seem to solve.

At breakpoints over ~1200px, everything is OK. But starting around 1200px and smaller, most elements in the DOM stop taking up the full width of the page, leaving a large negative space on the far right side of the browser.

The exception to this seems to be my navbar, which is fixed at the top of the page.

Screenshot 2024-07-29 at 13.55.45
Screenshot 2024-07-29 at 13.55.451920×1348 146 KB

I’ve attempted to set a width of 100% at every element up to the body , nothing seems to change the behavior.

I’m guessing this is a known issue of sorts? Can anyone provide guidance as to how to troubleshoot?

I’ve included links to my site below. Thanks for your time

Here is my site Read-Only: Webflow - Rich Leo
Staging: https://rich-leo.webflow.io/

2

Solved the issue. There was a button element that had width hardcoded at ~1150 px width. Had to dive into every element of the code to figure that out. Would be nice if that was a bit easier to ID, but ultimately my fault.

3

I use custom code in dev tools to help me visually see issues like this.

function checkFixedWidth() {
  const viewportWidth = window.innerWidth;
  const elements = document.querySelectorAll('*');

  elements.forEach((element) => {
    const elementWidth = getComputedStyle(element).width;
    const elementWidthValue = parseInt(elementWidth);

    if (elementWidthValue > viewportWidth) {
      element.style.border = '2px solid red';
    } else {
      element.style.border = 'none';
    }
  });
}

// Call the function on page load and on window resize
window.addEventListener('load', checkFixedWidth);
window.addEventListener('resize', checkFixedWidth);