Multi-column layout: elements are shifted rightwards from the center

[idea--list]

Describe the bug
Multi-column layout shifted rightwards.

To Reproduce
Steps to reproduce the behavior:

1. You set up a multi-column layout and put text or images in the columns.
2. Update the page and check it in the front-end
3. Notice all the content inside the multi-column area shifted significantly to the right side

Expected behavior
The layout should be centered exactly

Desktop (please complete the following information):

• OS: Windows 10 Pro x64
• Browser chrome v 70.0.3538.110

Fix

• Open the file gutenberg/build/block-library/style.css find the following part in it:
  @media (min-width:600px){.wp-block-column:nth-child(odd){margin-right:32px}
  .wp-block-column:not(:first-child),.wp-block-column:nth-child(2n){margin-left:32px}
  .wp-block-column:not(:last-child){margin-right:32px}}

• To solve the display issue, add these lines to the styles.css of your active theme:
  @media (min-width:600px){.wp-block-column:nth-child(odd){margin-right:0px}
  .wp-block-column:not(:first-child),.wp-block-column:nth-child(2n){margin-left:0px}
  .wp-block-column:not(:last-child){margin-right:0px}}

After that the content is centered exactly just as expected

Should be addressed as fast as possible.

[m-e-h]

Thinking this is the same issue: #12199

[designsimply]

I want to add a screenshot for clarity. I followed the steps provided and here is how a columns block with three columns in the editor and the front end from my test:

^{Tested with WordPress 5.0 and the Twenty Seventeen 1.8.}

I'm not sure this illustrates the problem though, because I don't see a significant shift. Can you let me know if I'm not looking in the right place? Also, can you note the theme and theme version number you are testing with?

Note: when you said "set up a multi-column layout" I assumed you meant a columns block. I wasn't 100% sure that's what you meant though, so let me know if that's not right!

[designsimply]

My apologies. I think this is a better screenshot:

^{Tested with WordPress 5.0 and the Twenty Seventeen 1.8.}

I still don't see it as a significant shift though, and so I still want to check in about that.

[idea--list]

Yes, i meant the column block. If i am right the only place where GB renders a columns block is inside the multi-column block.
Well if you try it on a REAL design then you get:

On a narrower screen it becomes even worse:

After applying the proposed fix:

Hope you are convinced now as without the fix GB just ruins real world designs.
Please note that even m-e-h has reported the same issue.

[idea--list]

Hmm strange... i copied the full width screenshots first and then the narrower ones but system mixed them up.

[idea--list]

Oh my GOSH!!

Here is the next bug with a real design. I have a "Columns" block to which i added a custom CSS class (in which i set a background-image). Inside that "Columns" block i have some text, etc. Below that there is a section (actually a "Section" block from the Ultimate Addons for Gutenberg plugin as with GB in itself it is simply not possible to expand just the background-color to full width without also expanding the content which is another issue IMHO). To the above mentioned section i also added a CSS class wich defines a semitransparent background-color.

You can clearly see the next bug at the bottom of this screenshot:

Took me some time to figure it out, but the cause lies once again in gutenberg/build/block-library/style.css file:
.wp-block-column{flex:1;flex-basis:100%;margin-bottom:1em;min-width:0;overflow-wrap:break-word;word-break:break-word}

After adding .wp-block-column{margin-bottom:0em}; to the theme's css file the isssue is resolved, the bg-image does not overflow the semi-transparent bg-color.

For god's sake, please remove any padding or margin offsets from the .wp-block-column class that you hard-coded in GB's css file. It is a really bad idea and not easy to find the cause!

Also found another one i still did not mention:
.wp-block-text-columns .wp-block-column{margin:0 16px;padding:0}

[designsimply]

I found that in my first test I happened to be using a theme that already accounts for this issue and has made style adjustments to remove the right-margin from the last column (Twenty Nineteen 1.0). I re-tested using an old version of Twenty Fifteen (I used 2.0 and the latest version is 2.1) with the following steps and I could see the problem:

1. Switch to a theme which does not style the last column already such as Twenty Fifteen 2.0 or Twenty Seventeen 1.7.
2. Add a columns block with three columns.
3. Add an image or text to each column.
4. Publish and view the post then check to see if the right column has a margin or not.

Note: earlier, I tested with Twenty Nineteen 1.0 on a first pass and it already has .wp-block-columns[class*="has-"] > :last-child {margin-right: 0} so that theme was not good for testing this issue.

Thank you for helping me to clarify the issue @idea--list!

[idea--list]

@designsimply
You just can't be serious with that! I am developing a theme for a client on WPRig v1.4.
How do you think it would make me sense to change the theme?
I just stop wasting my time to debug this crappy editor. Bye.

[miwojc]

i have opened issue at theme repo, but now i think it belongs here: WordPress/twentynineteen#742

[designsimply]

@idea--list apologies for not being more clear. I was noting that I was using the default theme and didn't realize at first that they had made an adjustment in the theme itself.

Work is ongoing in #12199 and I found the issue was also reported at #13035 and I would like to close this issue in favor of that one.