h4 tag won't align to the right side (Material UI styles)

I am trying to align text-content to the right side but there is nothing to do. I am only able to make it works when I keep textAlign property and remove all style property from my styles file. How can I fix this while keeping my property ?

Thank you:)

    messageContent: {
        "& #you": {
            justifyContent: 'flex-end',
            marginLeft: '5px',
            width: 'auto',
            height: 'auto',
            minHeight: '40px',
            maxWidth: '120px',
            borderRadius: '5px',
            color: 'white',
            alignItems: 'center',
            marginRight: '5px',
            paddingRight: '5px',
            paddingLeft: '5px',
            backgroundColor: 'cornflowerblue',
            overflowWrap: 'break-word',
            wordbreak: 'break-word',  
        },

<div className={classes.messageContent}>
    <h4 style={{textAlign: 'right'}} id={username === data.author ? "you" : "other"}>
         {data.message} 
    </h4>
</div>