Не понимаю что происходит

.formula {
margin: 10px;
width: 500px;
border-collapse: collapse;
display: table;
}

.formula p {
margin: 0;
padding: 10px;
font-size: 20px;
display: table-caption;
caption-side: bottom;

}

.content ul, header ul {
display: table-row;
}

.formula header {
display: table-header-group;
}

.content ul, header ul {
display: table-row;
}

.content ul li, header ul li {
display: table-cell;
}

.column {
display: table-column;
}

.column-group {
display: table-column-group;
}

Все ячейки контента слиплись и висят одним куском в первой колонке. Когда проходил задания такое тоже было, но проходило после того как задаешь шапке таблице display: table-header-group; А здесь это не помогает. Что происходит?

Дошло! Нужно задать для контента правило:

.content {
display: table-row-group;
}