Как горизонтально выровнять элементы карты (rmwc) в React?

В моем родительском компоненте:

        {
          this.state.projectList.map(dat => <Item data = {dat}/>)
        }

в дочернем компоненте Item

render() {
    return (
        <div style = {{'width':'100%', 'textAlign':'center'}}>
            <Card style = {{ width: '25rem', padding: '1rem', display: 'inline-block' }}>
                <CardPrimaryAction>
                    <div style = {{ padding: '0 1rem 1rem 1rem' }}>
                    <Typography use = "headline6" tag = "h2">
                        {this.props.data.name}
                    </Typography>
                    <Typography use = "body1" tag = "div" theme = "text-secondary-on-background">
                        {this.props.data.description}
                    </Typography>
                    </div>
                </CardPrimaryAction>
            </Card>
        </div>
    );
}

Я использую компонент rmwcCard, чтобы добавить кое-что.

Прямо сейчас он просто помещает все визуализированные элементы вертикально, как стек. На самом деле мне нужен небольшой набросок синей ручкой в ​​правой части изображения.

Я попытался дать упаковку div'width':'100%', 'textAlign':'center' и самому Card как inline-block, но он все тот же.