text error float beside html image

Question

Guys and the second is an error and I can not solve it the text is pasted in the image, I wanted at least to have some space between the text and the image,

I tried to put margin-left and n will I’m using bootstrap and the code this asim

#skill1 {
}



#skill1 img{
	width:200px;
	background-color:#F60;
	float:left;
	
	
}


#skill1 p {
	text-align:left;
	margin-top:5%;
	
		
}

<div class="row">

<div class="container-fluid">



<div class="col-xs-12 col-sm-12" id="skill1">



<img src="img/html.png" class="img-responsive img-thumbnail">




<p> Até algum tempo atrás, as animações nos sites eram feitas javascript ou flash. Com o surgimento do CSS 3 essa ideia vem mudando.

As animações com CSS dão um show de performance, são mais fluidas e sem travamentos. Como nem tudo são rosas, elas só funcionam em navegadores mais modernos. E aí que se encaixa o Graceful Degradation.

Em navegadores antigos, que não suportam essas animações, apresentamos o mesmo conteúdo, porém de uma maneira diferente sem perder nada em relação à acessibilidade.</p>

</div>






</div>

</div>

Answer 1

You can simply give an image margin using margin: 10px. Behold:

.img-responsive {
  margin: 10px
}

#skill1 {
}

#skill1 img{
	width:200px;
	background-color:#F60;
	float:left;	
}

#skill1 p {
	text-align:left;
	margin-top:5%;		
}

.img-responsive {
  margin: 10px
}

<div class="row">
   <div class="container-fluid">
      <div class="col-xs-12 col-sm-12" id="skill1">
         <img src="img/html.png" class="img-responsive img-thumbnail">
         <p> Até algum tempo atrás, as animações nos sites eram feitas javascript ou flash. Com o surgimento do CSS 3 essa ideia vem mudando.
            As animações com CSS dão um show de performance, são mais fluidas e sem travamentos. Como nem tudo são rosas, elas só funcionam em navegadores mais modernos. E aí que se encaixa o Graceful Degradation.
            Em navegadores antigos, que não suportam essas animações, apresentamos o mesmo conteúdo, porém de uma maneira diferente sem perder nada em relação à acessibilidade.
         </p>
      </div>
   </div>
</div>

Editing

This edition is to answer the question asked in the comments, so that the text remains below the image without margin on the left, in cases of smaller screens.

.areaImagem{
    float:left;
    margin-top:10px;
    background: #ccc;
    
}

.areaImagem img{
    display: inline-blcok;
   width: 200px;
    margin:2%;
    vertical-align:top;
}

.areaTexto p{
    display: inline-block;
    width: 50%;
    margin:2%;
    vertical-align:top;
}

<div class="row">
   <div class="container-fluid">
      <div class="col-xs-12 col-sm-12" id="skill1">
        <div class="areaImagem">
          <img src="img/html.png" class="img-responsive img-thumbnail">
        </div>
         <div class="areaTexto">
         <p class="text"> Até algum tempo atrás, as animações nos sites eram feitas javascript ou flash. Com o surgimento do CSS 3 essa ideia vem mudando.
            As animações com CSS dão um show de performance, são mais fluidas e sem travamentos. Como nem tudo são rosas, elas só funcionam em navegadores mais modernos. E aí que se encaixa o Graceful Degradation.
            Em navegadores antigos, que não suportam essas animações, apresentamos o mesmo conteúdo, porém de uma maneira diferente sem perder nada em relação à acessibilidade.
         </p>
           </div>
      </div>
   </div>
</div>