alinhamento do texto. | HTML5 e CSS3 I: Suas primeiras páginas da Web

Eu coloquei estou fazendo os exercicios, coloquei exatamente o mesmo código, mas o alinhamento do texto está diferente como mostrado no vídeo.


body {
    /*fonte do corpo do site e a cor*/
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 120%;
    /*espaço entre as linhas*/
    line-height: 1.5;
}

h1,h2 {
    /*familia da fonte*/
    font-family: "Open Sans Condensed", "Arial", sans-serif;
}

/*localiza o main e pega só o h1*/
main h1 {
    /*cor de fundo*/
    background-color: #851944;
    /*cor da letra*/
    color: #FFF;
    /*alinhamento de texto*/
    text-align: center;
    /*espaço interno do h1 */
    padding: 25px;
    /*tipo de borda do main*/
     border-bottom: 10px solid black;
}

/*localiza o menu e só pega os que possuem a tag a*/
main a {
    color: #851944;
}


/*pega a parte de texto do html, todos que tem a tag p*/
p{
    text-align: justify;
}

/*bloco da citação*/
blockquote {
    background-color: #D9E5E3;
   /*tamanho, tipo e cor da espessura da borda*/
    border: 10px solid #C2CCCA;
    box-sizing: border-box;
    width: 250px;

}

/*conteúdo auxiliar do conteúdo principal*/
aside {
    background-color: #3C1D3D;
    color: #F2FFFC;
    text-align: center;
}

/*conteúdo do bloco de tópicos*/
aside a {
    color: inherit;
    font-family: "Open Sans Condensed", sans-serif;
}

/*cabeçalho do rodape*/
footer {
    background-color: #000;
    color: #F2FFFC;
}

/*todo mundo que tem a tag navegação*/
nav a {
    color: #F2FFFC;
}

/*espaço interno nos comentarios, rodape e barra de navegação*/
blockquote, aside, footer {
    padding: 20px;
}

/*posicionando uma div no main*/
main div  {
    /*tamanho total da div*/
    width: 720px;
    /*definindo a margem para ser automatica*/
    margin : auto;
}

html

<!DOCTYPE html>
<html>
    <head>
        <title>Blog - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.png">
                <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="site.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    </head>
    <body>
        <main>
            <h1>Blog</h1>
            <div>
                <article>
                    <h2>O essencial de design responsivo</h2>
                    <time datetime="2014-07-01">01 de julho de 2014</time>

                    <p>Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas web para dispositivos móveis. Mas como começar?</p>

                    <a href="#">Leia mais</a>
                    <footer>Tags: <a href="#">design responsivo</a>, <a href="#">mobile</a>, <a href="#">css</a></footer>
                </article>

                <article>
                    <h2>Por que fazer páginas acessíveis?</h2>
                    <time datetime="2014-06-15">15 de junho de 2014</time>

                    <p>Tem se falado cada vez sobre acessibilidade na web. Há diversas técnicas e diretivas a serem seguidas, inclusive da própria W3C. Mas vale a pena investir nisso?</p>

                    <a href="#">Leia mais</a>
                    <footer>Tags: <a href="#">acessibilidade</a>, <a href="#">boas práticas</a></footer>
                </article>

                <article>
                    <h2>JavaScript não obstrusivo</h2>
                    <time datetime="2014-05-28">28 de maio de 2014</time>

                    <p>JavaScript é uma linguagem essencial hoje em dia para criar páginas ricas, interativas e dinâmicas. Porém, há alguns cuidados que devem ser tomados ao colocarmos código JavaScript em nossas páginas.</p>

                    <a href="#">Leia mais</a>
                    <footer>Tags: <a href="#">javascript</a>, <a href="#">boas práticas</a></footer>
                </article>
            </div>
        </main>
        <img src="eu.jpg" alt="Foto de João da Silva">
        <aside>
            <h1>João da Silva</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="bio.html">Sobre mim</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
        </aside>
        <footer>
            &copy; João da Silva 2014
        </footer>
    </body>
</html>

O alinhamento do texto da página está centralizado.