How to prevent overflowing border creating a horizontal scroll bar?

Question

I'm using Bricks Builder to create a website. I created a CSS Grid. I populated the grid with blocks. The blocks have borders. I want the bottom border on one of the blocks to overflow to the right edge of the screen without creating a horizontal scroll bar.

This is the custom CSS I used:

%root% {
    position: relative;
    border-top: 25px solid #101820;
    border-right: 25px solid #101820;
}
    
%root%:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100vw;
    border-bottom: 25px solid #101820;
    z-index: 1;
}

Using this same structure of code, I was able to get the top left block to overflow to the left of the screen without creating a horizontal scroll bar. But for the top right block, trying to overflow the border creates a horizontal scroll bar.

How do I rewrite the code so that overflowing the border does not create a horizontal scroll bar? I don't necessarily want to use body { overflow-x: hidden;}.

I've tried everything I could think of, including tons of suggestions from Claude 3 Opus and GPT4. width: 100% only spans to the end of the block and doesn't overflow. I've tried different width calculations like width: calc(100vw - 25px) or width: calc(100vw - 100%). Every time the border overflows, it creates the scroll bar.