Enesta págin de la documentación de Bootstrap, se proporciona un ejemplo que demuestra la "unidad de héroe" que normalmente se coloca en la parte superior de una página y anuncia algo importante. Estoy tratando de incorporar esto en una página, pero también me gustaría mostrar una miniatura al lado. Esto es lo que tengo:

<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>

Estacas funciona pero no hay espacio entre la miniatura y el texto:

Además, la imagen desborda lahero-unit div. Me doy cuenta de que puedo solucionar ambos problemas con un estilo en línea:

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

Sin embargo el estilo en línea realmente no es ideal y dudo en aplicarlo en todo el sitio editandobootstrap.css. ¿Hay una mejor manera? Estoy seguro de que alguien se ha encontrado con esto antes.