Элементы типографики в material-ui отображаются в одной строке

По какой-то причине мои компоненты типографики продолжаются в той же строке. Я пытался получить их на 2 разных линиях, но это не работает.

<div class = "center">
            <Typography variant = "h1" style = {{flexGrow: 1}} gutterBottom>line 1</Typography>
            <Typography variant = "h6">line 2</Typography>
 </div>

И строка 1, и строка 2 отображаются в одной и той же строке.

CSS для центра:

.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 500px;  }