I'm trying to center all elements on a website.

Here's my CSS file:

```
body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;  
    background-size: cover;
}

.centered{ /* Center entire body */
   width: 800px;
    margin: 0 auto;
}

```

Here's my HTML:

```
<!DOCTYPE html>
<html>
    <head>
        <title>Training File Upload</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="centered">
        <h1>MusicAI</h1>
        <form method="POST" >
            <span>Choose midi files:</span>
            <input type="file" name="file[]" multiple required/>
            <br>
            <input type="submit" name="submit" value="Upload for training" />
        </form>
        </div>
    </body>
</html>

```

As of right now the elements on my website are all on the top right. I'm not entirely sure if my centered function is doing anything since the website doesn't change after I refresh it.

Any help would be appreciated!