Is there an existing issue for this?

• I have searched the existing issues

Have you tried deactivating all plugins except Gutenberg?

• I have tested with all plugins deactivated.

Have you tried replicating the bug using a default theme e.g. Twenty Twenty?

• I have tested with a default theme.

Description

When you add "layout": { "contentSize": "800px" } to the theme.json file, it adds the following CSS to the editor:

.editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper > *, 
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > * {
    max-width: 773px;
    margin-left: auto !important;
    margin-right: auto !important;
}

If you add a block with alignfull it resets the width with max-width: none; but the margin-left and right which are set as such:

.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .wp-block[data-align=full] {
    margin-left: -8px;
    margin-right: -8px;
}

cannot be overridden due to the !important.

The result is an extra space of 8 pixels on each side of the editor.

Step-by-step reproduction instructions

See above.

Expected Behavior

Generally, I think the use of !important should be avoided since it makes it nearly impossible to override styles. Specifically, in this case, I'm not sure why the !important is necessary at all. I would expect the -8px margins to be applied to alignfull elements.

Current Behavior

See above.

Screenshots or screen recording (optional)

No response

Code snippet (optional)

No response

WordPress Information

WordPress 5.8

Gutenberg Information

Not using the Gutenberg plugin.

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Device Information

No response

Operating System Information

No response