Goofiness with my CSS - need advice...

Hi, first, let me as always thanks to the author of this fantastic piece of software. I can't use the built in header for this client, so I've tried to create one at this page:
http://www.huntingtonlearninghelps.com/test

Looks ok, until I resize for tablet and smartphone - what am I doing wrong with this code to make it more responsive:

HTML:

<table width="100%">
<tbody>
<tr>
<td width="50%"></td>
<td width="50%" style="align: center; vertical-align: middle; line-height: 95%"><BR>
<span style="font-size: 14pt; font-family: verdana, geneva, sans-serif;"><span style="font-size: 18pt;">CALL US</span> today at <span style="font-size: 12pt; color: #c61f91;">301-705-7100
<span style="font-size: 8pt; color: #388842;">Huntington Learning Center | Waldorf, MD</span>
</span></span>
</td>
</tr>
</tbody>
</table>`

CSS
.pagebreak_header {
background-color:#ffffff;
font-size: 14px;
border: none;
height: auto;
width: 100%;
margin-top:2px;
margin-left:15px;
margin-bottom:2px;
padding-top:2px;
padding-bottom:2px;
}