This green "parent" division is 500 pixels wide
The width of this gray paragraph is set to 400 pixels. The left margin is 25 and the right margin is 50 (for a total of 475. But since the parent is set to 500, the right margin will be set to 75 to make it come out even.
This yellow paragraph has a set width of 400 pixels and auto margins. Therefore, the margins will be maxed out equally (to 50) with the result being that the paragraph is centered).
This pink paragraph has a set width of 400 pixels and a right-margin set to 150 pixels. The left-margin is set to auto and shrinks down to 0, but that's not enough so the browser sets the right-margin to auto as well, reducing it to 100 pixels.
254 pixels wideThis image measures 254 pixels wide, which together with the 100 pixel left margin and the 200 pixel right margin is 554 pixels. That means the right margin has to be set to auto (which in this case will be 146. Note that the width of the text, which has no intrinsic width, is 200 pixels, not the width of the image above it.