[Solved] A case where CSS seems to lose control of the screen layout

Question

You are setting the width with max-width which does not apply to table rows (see https://developer.mozilla.org/en-US/docs/Web/CSS/max-width). Since you don’t define any widths for your table, the combination of the table with the li is what is causing the row to become so wide.

If you want to continue using a table you will need to define a width for the table or a max-width for code li.

Accepted Answer

You are setting the width with max-width which does not apply to table rows (see https://developer.mozilla.org/en-US/docs/Web/CSS/max-width). Since you don’t define any widths for your table, the combination of the table with the li is what is causing the row to become so wide.

If you want to continue using a table you will need to define a width for the table or a max-width for code li.