[css/html]Inline-block e conteúdo

Olá, estou fazendo o layout de um site.
Fiz uma especie de galeria com Div's usando JS, jquery, css e html, mas provavelmente o problema esta no css. O atributo 'display:inline-block' está impedindo que eu adicione conteúdos dentro da div, quando escrevo qualquer coisa detro do espaço da div, ela muda drasticamente de posição...
CSS:

#page .img{

overflow:hidden;
display:-webkit-inline-flex;
background-repeat:no-repeat ;
background-size: cover;
height:100%;
width:100%;
top:0px;
}

HTML:

<div id='page' >
<div class='img' style='background-image:url("images/img1.jpg");'>

espaço para adicionar elementos

</div><div class='img' style='background-image:url("images/img2.jpg");'>
espaço para adicionar elementos

</div><div class='img' style='background-image:url("images/img3.jpg");'>
espaço para adicionar elementos

</div><div class='img' style='background-image:url("images/img4.jpg");'>espaço para adicionar elementos

</div>
</div>

Uso inline-block para deixar as div's alinhadas lado-a-lado possibilitando a rotação da galeria de div's.
Tentei também -***-inline-flex, mas nada. Mostrem-me uma solução plausível,por favor.

Obrigado!