Wide and Full-Width Alignment in WP

style.css

/* Break out of a container in a WP site. */

/* Exclude blocks in the editor. */
.alignfull:not(.wp-block) {
    margin-left: calc( 50% - 50vw );
    margin-right: calc( 50% - 50vw );
    max-width: 100vw;
}

.alignwide {
    margin-left: max(
        ( 50% - 50vw ) + var( --wp--style--root--padding-left ),
        ( var( --wp--style--global--wide-size ) - var( --wp--style--global--content-size ) ) / -2
    );
    margin-right: max(
        ( 50% - 50vw ) + var( --wp--style--root--padding-right ),
        ( var( --wp--style--global--wide-size ) - var( --wp--style--global--content-size ) ) / -2
    );
    max-width: 100vw;
}