In modern browsers, I found that using container queries was the best way forward

first, we need to identify an element, that is going to be the outermost element that will span from screen edge to screen edge. in 99.9% of cases, this will be body tag. More accurately, we are looking for page's scroll container.

body {
  container-type: inline-size;
  container-name: viewport;  /* yes, we creatively named it 'viewport' */
}

@container viewport (width > 0) {
  .w-screen {
    width: 100cqw;
  }
}

then, we can easily use the w-screen class to make a container use the width of the b

---

for those who use tailwind, there is already a w-screen utility class which suffers from the same problem, so add this to your global

body {
  @apply @container/viewport;
}

@layer utilities {
  .w-screen {
    @container viewport (width > 0) {
      width: 100cqw;
    }
  }
}

I'm using this answer for inspiration
100vw causing horizontal overflow, but only if more than one?