Header help!

I have the logo in the header, would like to add text beside the logo that will wrap with the responsive resizing. Trying to second guess how to do so, i created a second transparent image that is text. With firebug, I wrote in the img attribute beside the logo image , using marT70 it lined up nearly where I needed it to do at 100%, yet viewing at smaller resolutions the margin tag also is set at the 70 pixels which of course puts added padding not needed. SO- how may I add text transparent text beside the header logo with about 35 pixels left padding, lining up baseline to logo image (at 100% browser), then wrap directly under logo when resizing to cell resolution. The navigation menu then to drop below, left of all of these/this.

(code from firebug-screen shot attached):
<img alt=”Zerla Properties” src=”https://zerlaproperties.com/zerlaresponsive/wp-content/uploads/2012/12/object14847171531.png&#8221; class=”marT20 marB20″ id=”logo” scale=”0″ style=”opacity: 1;”><img src=”https://zerlaproperties.com/zerlaresponsive/wp-content/uploads/2012/12/object560216306.png&#8221; class=”marT70″>

masthead: /* Header */
#logo { position: relative;}
#logo:active { top: 1px;}
.container[role=’masthead’] header { position: relative; z-index: 1;}
header nav { float: right; margin: 35px 0 0 0;}

I purchased the theme, yet he will support only if having problems installing. – I merely need/want to have logo and company slogan (transparent image) in header,that will resize properly with browser sizes. And how to do so in either child theme or change his “do not change” css files. Thanks!