After implementing the code below from a helpful CSS Tricks article, my element spanned across the full width of the page, stretching beyond its parent's boundaries:
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
The code worked perfectly on Chrome, Firefox, and Safari on my Macbook Pro but presented a slight overflow issue on Windows 10 browsers. This resulted in an unwanted horizontal scrollbar appearing.
I'm curious why this discrepancy exists between operating systems regardless of the browser being used. I prefer to tackle this issue methodically rather than resorting to adjusting percentage values randomly.
Edit: Upon further investigation, it seems that the problem is due to using the "vw" unit in browsers displaying visible vertical scrollbars. The vw unit includes the scrollbar width, causing horizontal overflow. There are workarounds available, such as applying overflow-x: hidden to the html root element, but these solutions may not be ideal. Other options involve complex Javascript implementations or utilizing calc() to exclude the scrollbar width from the 100vw. Not the most elegant fixes!