I have about **3 div**, with class as "**qcircle**" and i have defined them using css in order to appear as 3 circles. and they are given " **display:inline-block**;" so that i would get them **horizontaly arrainged in a line**.
 **i want to write some thing inside these 3 divs**,so i **used a paragraph tag**.
but when i did that in the first cirlce, **the whole cirlce including given content comes down and other 2 cirlces stay where they are**..
I have no idea why this is happening can some body help me with this ????  

Here is my html:

```
            <div class="qcircle">
                <p> THE FIRST ONE</p>
            </div>
            <div class="qcircle">

            </div>
            <div class="qcircle">

            </div>
            <div class="qcircle">

            </div>

```

and here is my css rules

```
.circles{
text-align: center;
}
.qcircle{
width: 150px;
height: 150px;
border-radius: 50%;
background-color: black;
display: inline-block;
}
.qcircle p{
color: blue;
font-size: 20px;
}

```

this is the codepen link
<http://codepen.io/ShamZ/pen/WxRbKw>