Материал-UI выравнивание сетки, не по центру

Question

Я хотел бы задать вам вопрос о выравнивании материала и пользовательского интерфейса.Я следовал примеру в материале-ui.
ссылка !

Но в результате применения примера я не работал по вертикали.Я был бы признателен, если бы вы могли дать мне решение.
вот мой код и мой результат

Я хочу видеть результат как черный.

class NavComponent extends React.Component {

    render() {
        const navborder = {
            border: "1px solid black",
            height: "100px"
        }
        const tempStyle = {
            marginLeft: "50px",
        }
        const temp2Style = {
            marginRight: "55px",
            background: "purple",
            color: "white"
        }
        return (
            <div style={navborder}>
                <Grid container>
                    <Grid item xs={6}>
                        <Grid container
                            direction="row"
                            justify="flex-start"
                            alignItems="center"
                        >
                            <img style={tempStyle} src="slacklogo.png" alt="logo" />
                        </Grid>
                    </Grid>
                    <Grid item xs={6} >
                        <Grid container
                            direction="row"
                            justify="flex-end"
                            alignItems="center"
                        >
                            <div>
                                Sign in
                            </div>
                            <Button style={temp2Style} color="secondary" >
                                Get Start
                            </Button>
                        </Grid>
                    </Grid>
                </Grid>
            </div>
        )
    }
}
export default NavComponent