Left or right aligned images are the wrong size on the front.

[carolinan]

Describe the bug
When an image is left or right aligned in the editor, the max width is reduced:

.editor-styles-wrapper .wp-block[data-align="left"] > * {
    max-width: 290px;
    margin-right: var(--global--spacing-horizontal);
}

On the front, the max width of the image is depending on multiple styles, including:

.entry-content img {
    max-width: 100%;
}
.wp-block-image img {
    max-width: 100%;
}

To Reproduce
Steps to reproduce the behavior:

1. Add two image blocks to the editor. It does not matter if the blocks are the only blocks, or for example placed in between text.
2. Align the image to the left and right respectively.
3. View the size in the editor, and save.
4. View the front and compare the size.
5. See error

Expected behavior
The editor and front should match.

Screenshots¨
Editor:

Front:

Editor version (please complete the following information):
WordPress version: 5.6-beta2-49360
Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default?
"default"

[jasmussen]

Looks like this PR outputs some baseline styles for image blocks: WordPress/gutenberg#8399

Specifically this rule:

.wp-block-image img {
    max-width: 100%;
}

It looks like the following rule is not from Gutenberg:

.entry-content img {
	max-width: 100%;
}

... perhaps that's a TwentyTwentyOne rule.

Without testing TwentyTwentyOne and reproducing, it looks like you need to increase the specificity when left aligned.

There is a separate discussion on whether Gutenberg is too opinionated in providing that max-width responsive rule in the first place, but this is difficult due to the amount of time that rule has been in place.

[lwangdu]

entry-title and entry-content width seems off. Here is the screen shoot.