No JS. Did the mobile nav with CSS (hidden checkbox)

Does anybody have a better way of implementing the grey background in the top right? I originally added it by using absolute positioning and top/right 0, but it goes beyond the body. I set the body to 1440px as the design says but my screen is larger. I found a solution which was to apply a background to the grid cells using ::before and ::after, but it feels like a bit of a hack. Also, it wouldn't work if I wasn't using CSS grid.

Code: .grid::before { content: ""; background-color: hsl(207, 33%, 95%); grid-column: 2/3; grid-row: 1 /2; z-index: -999; }

.grid::after { content: ""; background-color: hsl(207, 33%, 95%); grid-column: 2/3; grid-row: 2 /3; height: 50%; border-radius: 0 0 0 50px; z-index: -998; }