no se como puedo separar el texto de la imagen estan muy pegados. este es codigo css que tengo:
/* Aqui inicia el CSS para la pagina home */ .banner{ width: 100%; }
.principal{ padding: 3em 0; background: #FEFEFEFE; width: 940px; margin: 0 auto; }
.titulo-principal{ text-align: center; font-size: 2em; margin: 0 0 1em; clear: left; }
.principal p{ margin: 0 0 1em; }
.principal strong{ font-weight: bold; }
.principal em{ font-style: italic; }
.utensilios{ width: 120px; float: left; margin: 5px 20px 20px 0; }
.mapa{ padding: 3em 0; background: linear-gradient(#FEFEFEFE,#888888 ) }
.mapa p{ margin: 0 0 1em; text-align: center; }
.mapa-contenido{ width: 940px; margin: 0 auto; }
.diferenciales{ padding: 3em 0; background-color: #888888; }
.contenido-difereciales{ width: 640px; margin: 0 auto; }
.items{ line-height: 1.5; }
.items:before{ content: "☆"; }
.items:first-child{ font-weight: bold; }
.imagen-diferenciales{ width: 60%; }
.lista-diferenciales{ width: 40%; display: inline-block; vertical-align: top; }
.video{ width: 560px; margin: 1em auto; }