Problem z umiejscowieniem tekstu

Witam, mam problem z tekstem.
Po wstawieniu obrazka wychodzi on poza wyznaczone do tego miejsce, jakiego rozwiązania mogę użyć?

CSS:

#twarz{
background:url('http://i.imgur.com/RWjBXkA.png') no-repeat;
height: 380px;
width: 270px;
margin-left: 25px;
margin-top: 0px;
}

--------------------
#p2{
font-size: 13px;
    width:70%;
    height:400px;
margin: 0 auto;
    background: #121212;

HTML:

<div id="p2">
<br><font face="Trebuchet MS" color="#ffffff"><p style="margin-left: 20px; text-align: left"><div id="twarz"></div>lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
 <br></center>
</font></div></p>

Chodzi mi tekst zaznaczony czerwonym kwadratem, chcę aby znajdował się w kwadracie koloru zielonego.

http://codepen.io/anon/pen/WQzXaa

Coś takiego udało mi się wymyślić, pewnie można to zrobić łatwiej/lepiej ale może ci się przyda na "poczekaniu"

Nie powinno się używać już znacznika <center>, a co do obrazka... Sprawdź jaką ma class lub id i w global.css choćby dopisz dla tej klasy lub id ten kod:

float: left;
margin: 0 15px 0 0;

Teraz obrazek będziesz miał po lewej stronie, a jak chcesz po prawej, to ten:

float: right;
margin: 0 0 0 15px;