Posicionamento das aspas

Boa tarde, Segui os passos como dito em aula mas o posicionamento das aspas não está de acordo com o exemplo dado. As aspas do meu bio.html estão centralizadas na caixa blockquote.

Meu html:

<blockquote tabindex="1" class="citacao-bio">
                <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
                <cite>José Souza, Fiat</cite>
            </blockquote>

            <blockquote tabindex="1" class="citacao-bio">
                <p>João domina as tecnologias como ninguém. Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes.</p>
                <cite>Manoel Santos, Petrobrás</cite>
            </blockquote>

e meu CSS:

.citacao-bio {
    background-color: #D9E5E3;
    border: .5em solid #C2CCCA;
    padding: 1em;
    margin: 1em 2em;
    width: 30ch;
    box-sizing: border-box;
}
.citacao-bio:nth-of-type(odd){
    float: right;
    margin-right: 0;
}
.citacao-bio:nth-of-type(even){
    float: left;
    margin-left: 0;
}
.citacao-bio:hover, .citacao-bio:focus {
    box-shadow: 0 0 0 99999px rgba(0,0,0,.8);
}
.citacao-bio:nth-of-type(odd):hover, .citacao-bio:nth-of-type(odd):focus {
    transform: scale(1.2) rotate(5deg);
}
.citacao-bio:nth-of-type(even):hover, .citacao-bio:nth-of-type(even):focus {
    transform: scale(1.2) rotate(-5deg);
}
blockquote:before {
    content: '"';
    font-size: 10em;
    position: absolute;
    color: lightgray;
}

Não consigo identificar o problema. :/ Se alguém puder me dar uma luz eu agradeço.

Obrigada