Como exibir uma miniatura na unidade heroica com o Bootstrap?

Emesta págin da documentação do Bootstrap, é fornecido um exemplo demonstrando a "unidade heroica", que normalmente é colocada no topo de uma página e anuncia algo importante. Estou tentando incorporar isso em uma página, mas também gostaria de exibir uma miniatura ao lado. Aqui está o que eu tenho:

<div class="hero-unit">
  <div class="thumbnail span3">
    <img src="http://placehold.it/260x180" alt="Sample Image">
  </div>
  <h1>Important Site Information</h1>
  <p>This paragraph contains important ... </p>
  <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>

Estequas funciona, mas não há espaço entre a miniatura e o texto:

Além disso, a imagem está transbordando ohero-unit div. Sei que posso corrigir os dois problemas com um estilo embutido:

<div class="hero-unit" style="overflow: auto;">
...
<div class="thumbnail span3" style="margin-right: 20px;">

Contudo estilo in-line não é o ideal e hesito em aplicá-lo em todo o site editandobootstrap.css. Existe uma maneira melhor? Tenho certeza de que alguém já se deparou com isso antes.

questionAnswers(2)

yourAnswerToTheQuestion