Just add display: inline-block; to class: produtos-conteudo-ponta

.produtos-conteudo-ponta {
    display: inline-block;
}

Update

To add a larger spacing between the images you can use the margin a>. Such as margin-left:10px; or margin-right:10px; . Or even add both so that they are more or less with an equal margin for both sides.
However I would approach it differently.

As we have 3 divs online (inline), I would do the following calculation:

  

100 to divide with 3 that gives = 33.333333
  This calculation will be - 100% the size of div parent to divide by 3 divs child

then the width size for the class produtos-conteudo-ponta will be 33.333333% making them equal equal in size, and responsive to div parente . (this thinking already in the possibility of this being able to be resized later in screens of small resolutions)

.produtos-conteudo-ponta {
    display: inline-block;
    width: 33.333333%;
}

Next you would modify the HTML markup code hierarchy as follows:

<div class="produtos-conteudo-ponta one-fourth-ponta">
    <div class="content">
        <img class="photo" src="/imagens-ponta/amsterdam.jpg"/>
        <h4 class="name">Descricao</h4>              
    </div>
</div>

In the above code, we modified the image to be included within the .content class for the following reason:

Instead of changing class by class and add attributes to each of them, for example - margins, spaces etc times and times without count, instead we will only apply the styles to class .content :

.content {
    display: block;     /* Poderíamos adicionar também width:100%; mas ao adicionarmos este atributo o width:100%; já está a ser aplicado */
    max-width: 200px;   /* Isto especifica que nós não queremos que a div cresça mais do que os 200px */
    margin: 0 auto;     /* Isto centraliza a div ao centro por igual - para ambos, a margem esquerda e a margem direita. É nesessário o display:block; acima já adicionado para que isto funcione correctamente */
}
.photo {width: 100%;}   /* E por fim a imagem ficará a 100% da div "content". que neste caso será o máximo de 200px */

Here is an online example of this in jsFiddle ► link

Drag the jsFiddle viewport to see its behavior at various resolutions. To increase or decrease the spacing between them, just play with the value max-width:200px;

Test with this css:

.produtos-conteudo-ponta{
    float:left
}

It causes all elements of class .produtos-conteudo-ponta to float on the left, so Bloquinhos are side by side.

As stated above, the effect can also be achieved with display: inline-block;

Fiddle: Link to see online