html - Image won't resize with browser size -

i trying have image next text. want vertically centered text offset left isn't overlapping text. can achieve whenever resize browser , make smaller image not move.

i have tried putting text within text whenever text doesn't center properly. have add link underneath image don't think best way go.

here jsbin of problem code: http://jsbin.com/evasix/2/ **i included full code in jsbing because think may being inherited div class.

html:

<div class="middle">     <div class="side-img">         <h2>millions of entrepreneurs, freelancers, small<br>businesses, , departments inside big<br> organizations rely on our web apps.</h2>         <img src="images/img-customerss.png" class="customers">     </div> </div> 

css:

h2 {     position: relative;     top: -30px;     text-align: center;     font-size: 45px;     color: #232323;     font-family: 'crimson text', serif;     line-height: 50px; }   .customers {     position: relative;     bottom: 150px;     left: 425px; } 

that because using pixel distances edges. pixel fixed size, , resizing window wont cause adapt. try using unit of measurement such %.

hope helped. luck.