Text-align child elements not working - html

Question

I am trying to make a one-on-one chat and I want the messages to be in bubbles form.
This is the HTML code:
<div id="msgWindow" class="block">
<div id="messages">
<p class="sysmsg">You're now connected with a random chat partner...</p>
<p class="sysmsg">Say Hello!</p><p class="msg-item">
<span class="stranger">Stranger</span> hey</p>
<p class="msg-item"><span class="you">Me</span> hi</p>
</div>
</div>
and this is what it looks like:
So what I basically want to do is to text-align the first message to the right and to keep the second one on the left.
I tried with this CSS but it's not working ..
#messages{
height: 350px;
padding: 10px;
overflow: auto;
word-wrap: break-word;
}
#messages p{
padding: 5px 0;
}
.msg-item{
}
.you, .stranger{
padding: 4px;
color: #FFF4F4;
font-weight: bold;
border-radius: 0.5em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
margin-right: 5px;
}
.you{
background-color: #555;
text-align: right;
}
.stranger{
background-color: #D94D58;
text-align: left;
}
Any help would be appreciated!

Answer 1

The text-align should be on the container (the block element that wrap your text).
Here is an example for a fix:
#messages{
height: 350px;
padding: 10px;
overflow: auto;
word-wrap: break-word;
}
#messages p{
padding: 5px 0;
}
.msg-item{
}
.you span, .stranger span{
padding: 4px;
color: #FFF4F4;
font-weight: bold;
border-radius: 0.5em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
margin-right: 5px;
}
.you span{
background-color: #555;
}
.stranger span{
background-color: #D94D58;
}
p.you {
text-align: right;
}
p.stranger {
text-align: left;
}
<div id="msgWindow" class="block">
<div id="messages">
<p class="sysmsg">You're now connected with a random chat partner...</p>
<p class="sysmsg">Say Hello!</p>
<p class="msg-item stranger"><span>Stranger</span> hey</p>
<p class="msg-item you"><span>Me</span> hi</p>
</div>
</div>