Question: I experience some strange text alignment, can you give me a hint where the Problem is:

I was trying to create a speechbubble:

```
.round
{
margin-top: 5px;
border-radius:50%;
background-color:#3d5177;
width:50px;
height:50px;
float: left;
}

.number {
color: white;  
padding: 8px 17px;
font-size: 30px;
font-weight: normal;
}

.faq_container {
overflow: hidden;
}

.talkbubble {
left: 80px;
position: relative;
width: 340px;
height: 100px;
padding: 0px;
background: #aaaaaa;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
 }

.talkbubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 13px 10px 0;
border-color: transparent #aaaaaa;
display: block;
width: 0;
z-index: 1;
left: -13px;
top: 22px;
 }

 .talkbubble_text {
display: block;
text-align: left;
padding: 10px;  
 }

```

<http://jsfiddle.net/Lf4sr/>

Thanks

Answer: 
The problem is with the `<div class="round">` **CSS**. The width of the element is pushing the text over to the right.

Add this to the `.round` class:

```
.round {
     top: 0;
     left: 0;
     position: absolute;
}

```

And add this to the `.faq_container` class:

```
.faq_container {
    position: relative;
}

```

**[Demo](http://jsfiddle.net/Lf4sr/3/)**

Note: You can remove `float: left;` from `.round`.
I think the issue is that your last line of text is not inline with the others. This is due to the way you are laying out your code. Your text is being pushed across by your round element, which is a set height. Any text after this is not being pushed across, a quick fix would be to add a margin on the bottom of the number circle.

```
.round
{
    margin-top: 5px;
    border-radius:50%;
    background-color:#3d5177;
    width:50px;
    height:50px;
    float: left;
    margin-bottom : 50px;
}

```

<http://jsfiddle.net/Lf4sr/4/>

But would probably be better to restructure your code a little to stop this happening in the first place.