And why can’t I use 50% width for the second container? I thought 50% + 50% = 100% But if that second container gets 50% width it jumps into the next row.
Because with inline-block you have to account for font-size as inline-block also counts whitespace in your HTML and will leave a space between each block.
Usually you can solve this problem by setting the parent element’s font-size to zero BUT, in this case, you can’t do that as it would make the li numbering disappear.
What you CAN do is introduce a little negative margin to counteract the issue.