I'm new to react so when I tried aligning my image the CSS way it failed. The only way I can get the image to align to the right side of the screen is by positioning it. Any alternatives?

I tried doing jjustifyContent ,justifySelf and even floating to right. Nothing works.

[Image to my app](https://i.stack.imgur.com/njC4P.png)

My code: 

```
import React from "react";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  main: {
display: "flex",
justifyContent: "flex-end"
},
header: {
color: "white"
},img: {
justifySelf: "flex-end"
 }});

export default function Header() {
const classes = useStyles();
return (
<div className={classes.main}>
  <span className={classes.header}>Header</span>

  <img
    className={classes.img}
    src="https://facebook.github.io/react-native/img/header_logo.png"
  />
</div>
);
}

```