Exercicio de float right na apostila CAELUM WD 43 | HTML5 e CSS3 I: Suas primeiras páginas da Web

Prezados na apostla aberta acima, há um exercio de float right que cita o seguinte enunciado:

4) Queremos que a imagem da Família Pelho esteja žutuando a direita no texto na seção sobre a História da empresa. Para isso, use a propriedade float no CSS. Como a <figure> com a imagem da família Pelho ainda não possui id, adicione um: <figure id="familia-pelho"> Agora podemos referenciar o elemento através de seu id em nosso CSS, indicando a žflutuação e uma margem para espaçamento:

#familia-pelho {
  float: right;
  margin: 0 0 10px 10px;
}

Teste o resultado. Repare como o texto é renderizado ao redor da imagem, bem diferente de antes

Porém, com a formatação acima, a imagem anda apenas para a direita e não se alinha com o texto da história, como é o resultado esperado da apostila. Gostaria de saber se errei algum passo do exercicio. Segue doc html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <img src = img/logo.png>
    <link rel="stylesheet" href="css/sobre.css" title="Sobre a Mirror Fashion"
  </head>
  <body>
    <h1>A Mirror Fashion</h1>
<p>
A <strong>Mirror Fashion</strong> é a maior empresa comércio eletrônico no segmento de moda em todo o mundo.
Fundada em 1932, possui filiais em 124 países, sendo líder de mercado com mais de 90% de
participação em 118 deles.
Nosso centro de distribuição fica em <a href="https://maps.google.com.br/?q=Jacarezinho">Jacarezinho, no Paraná </a>. De lá, saem 48 aviões que
distribuem nossos produtos às casas do mundo todo. Nosso centro de distribuição:
Compre suas roupas e acessórios na Mirror Fashion. Acesse <a href="index.html">nossa loja</a> ou entre em contato
se tiver dúvidas. Conheça também nossa <a href="#historia">história</a> e nossos <a href="#diferenciais">diferenciais</a>.
</p>

<h2 id="historia">História</h2>
<p>
A fundação em 1932 ocorreu no momento da descoberta econônica do interior do Paraná. A
família <em>Pelho</em>, tradicional da região, investiu todas as suas economias nessa nova iniciativa,
revolucionária para a época. O fundador <em>Eduardo Simões Pelho</em>, dotado de particular visão
administrativa, guiou os negócios da empresa durante mais de 50 anos, muitos deles ao lado
de seu filho <em>E. S. Pelho Filho</em>, atual CEO. O nome da empresa é inspirado no nome da família.
</p>
<p>
O crescimento da empresa foi praticamente instantâneo. Nos primeiros 5 anos, já atendia 18 países.
Bateu a marca de 100 países em apenas 15 anos de existência. Até hoje, já atendeu 740 milhões
de usuários diferentes, em bilhões de diferentes pedidos.
</p>
<p>
O crescimento em número de funcionários é também assombroso. Hoje, é a maior empregadora do
Brasil, mas mesmo após apenas 5 anos de sua existência, já possuía 30 mil funcionários. Fora do
Brasil, há 240 mil funcionários, além dos 890 mil brasileiros nas instalações de Jacarezinho e
nos escritórios em todo país.
</p>
<p>
Dada a importância econômica da empresa para o Brasil, a família Pelho já recebeu diversos prêmios,
homenagens e condecorações. Todos os presidentes do Brasil já visitaram as instalações da Mirror
Fashion, além de presidentes da União Européia, Ásia e o secretário-geral da ONU.
</p>

<figure id="familia-pelho">
  <img src = "img/Familia-Pelho.jpg">
  <figcaption>Familia Pelho</figcaption>
</figure>

<figure id="centro-distribuicao">
  <img src="img/centro-distribuicao.png">
  <figcaption>Centro de distribuição Mirror Fashion</figcaption>
</figure>

<h2 id="diferenciais">Diferenciais</h2>
<ul>
<li>Menor preço do varejo, garantido</li>
<li>Se você achar uma loja mais barata, leva o produto de graça</li>
<li>Pague em reais, dólares, euros ou bitcoins</li>
<li>Todas as compras com frete grátis para o mundo todo</li>
<li>Maior comércio eletrônico de moda do mundo</li>
<li>Atendimento via telefone, email, chat, twitter, facebook, carta, fax e telegrama</li>
<li>Presente em 124 países</li>
<li>Mais de um milhão de funcionários em todo o mundo</li>
</ul>
<div id ="rodape">
  <img src = "img/logo.png">
  &copy;Copyright Mirror FAshion
</div>

  </body>
</html>

CSS:

body {
  color: #333333;
  font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
  margin-left: auto;
  margin-right: auto;
  width: 940px;
}

h1{
  background-image: url(../img/sobre-background.jpg);
  padding: 10px;
  }

h2{
  border-bottom: 2px solid #333333;
  margin-top: 30px;
  }
p{
  padding: 0 20px;
  text-indent: 15px;
}

  figure{
    background-color: #F2EDED;
    border:1px solid #ccc;
    text-align: center;
    padding: 15px;
    margin: 30px;
  }

  figcaption{
    font-style: italic;
    margin-top: 10px;
  }

  #centro-distribuicao {
    margin-left: auto;
    margin-right: auto;
    width: 550px;
  }

#rodape{
  color: #777;
  margin: 30px 0;
  padding:30px 0;
}

#rodape img{
  margin-right: 30px;
  vertical-align: middle;
  width: 94px;
}

#familia-pelho{
float: right;
}

Obrigado!