Probably this question has been asked hundred of times, however I couldn't find solution working for me, I wrapped @mui grid container inside of regular div. So parent div has:

OuterContainer: {
    display:'flex',
    justifyContent:'center',
    height:"95%",
    width:"80%",
    margin:'1em',
     
}

while grid container(which is imagecontainer) has:

ImageContainer:{
    height:"95%",
    backgroundColor: "#4C6D94",
    borderRadius:12,
    margin:'0 auto'
}

I have tried to use display:inline-block in child div and many other ways, but nothing worked.

Any help would be appreciated.