Paste the below code to your function.php file
/**
* Register support for Gutenberg wide images in your theme
*/
function mytheme_setup() {
add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );
Use below CSS
/* Gutenberg Width Image -------*/
.alignwide {
margin-left : -200px;
margin-right : -200px;
padding: 20px 0;
}
.alignfull {
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
padding: 20px 0;
}
.alignfull img {
width: 100vw;
}
@media only screen and (max-width : 1200px){
.alignwide {
margin-left : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width : 100vw;
padding: 10px 0;
}
}
Source: https://motopress.com/blog/wide-or-full-width-alignment-in-gutenberg-wordpress/