CSS Tip

Extend the background to the edge of the screen

Extend the background of an element outside of its container to cover the full screen width

An overflowing background

.full-background {
  border-image: conic-gradient(pink 0 0) fill 0//0 100vw;
}

See the Pen Full screen background color by Temani Afif (@t_afif) on CodePen.

Related: smashingmagazine.com/2024/01/css-border-image-property/

Another idea more versbose using box-shadow

.full-background {
  --c: pink;
  background: var(--c);
  /* a big box-shadow */
  box-shadow: 0 0 0 100vw var(--c);
  /* clip only the top and bottom part of it */
  clip-path: inset(0 -100vw);
}

See the Pen Full screen background color by Temani Afif (@t_afif) on CodePen.

More CSS Tips