Hello I am making a client's web template responsive but I am still learning and having some issues getting the headings responsive.

Initially they are all ok and inline but as the page gets smaller the second heading moves to the edge of the page on the left, but the top heading doesn't so they are not inline.

Then when the page is mobile size, the heading font does not downscale.

I cannot post a link as I am new but here is the html:-

Code:
<div id="header">
		<div class="container row">	
			<div class="cover twelvecol last">
            	<h1>Onlywhat.com - the Request Engine</h1>
    		</div><!--/Cover-->
		</div><!--/Container-->
	</div><!--/Header-->

	<div id="wrapper" class="container row">

		<div class="cover twelvecol last">
    		<h2>Channel based request engine, integrated with social media. Lead generating platform for business.</h2>
        
        	<div class="box_cover">
        	
            	<div class="box fleft fourcol">
            		<div class="container">
            			<h3 class="you">For You</h3>
                		<ul>
                    		<li>Post requests into channels</li>
                    		<li>Receive replies</li>
                    		<li>Share posts</li>
                    		<li>Save time (and money)</li>
              			</ul>
            		</div><!--/Container-->
				</div><!--/Box-->
                
                <div class="clear"></div>
                
			</div><!--/box_cover-->
        
        	<div id="footer">
        		
                <span class="fleft">
                	<a href="http://www.onlywhatmedia.com/" target="_blank">Onlywhat Media Ltd</a>
                </span>
                
            	<span class="socials fright">
                	<a href="https://plus.google.com/102142983833488119170" target="_blank"><img src="images/gplus.jpg" alt="" /></a>
                    <a href="http://www.linkedin.com/company/onlywhat-media-limited" target="_blank"><img src="images/linkedin.jpg" alt="" /></a>
                    <a href="http://www.twitter.com/OnlywhatMedia" target="_blank"><img src="images/twitter.jpg" alt="" /></a>
                    <a href="http://www.facebook.com/OnlywhatMedia" target="_blank"><img src="images/facebook.jpg" alt="" /></a></span>
          			<div class="clear"></div>
                    
        		</div><!--footer-->
    
		</div><!--/Cover-->

	</div><!--/Wrapper-->
The css is here:-

Code:
#header{
	background:url(../images/head_bg.jpg) repeat-x left top;} /* Applies background to header */
	
#header h1{
	font-size:24px; 
	color:#fff; 
	font-weight:bold; 
	line-height:80px;}	/* This styles your H1 Main Heading */
	
body{
	background:url(../images/bg.jpg) repeat; 
	font-family:Arial, Helvetica, sans-serif;} /* Generic styles for your page as whole */
	
#wrapper{
	padding:20px 0;} /* This div keeps all your content in place by wrapping them */

#wrapper h2{
	font-size:20px; 
	color:#696767; 
	font-weight:bold; 
	line-height:20px; 
	margin-bottom:20px;}	/* This styles your H2 Heading which sits just under your top H1 Heading */
		
.cover{
	margin:0 auto;} /* This class works in the same way as the wrapper above and keeps the content inside it in place*/
	
.btn{
	font-size:20px; 
	color:#fff; 
	text-decoration:none; 
	background-color:#036dbe; 
	display:inline-block; 
	padding:0 20px; 
	line-height:40px;}	/* This styles the large blue button */

.box{
	padding-bottom:20px;} /* Baseline styles for your content boxes */
	
.box-button{
	padding-bottom:0px;} /* Baseline styles for your button boxes */
	
.box_cover{
	background-color:#fafafa; 
	box-shadow:0 0 5px #b1afaf; 
	position:relative; 
	behavior:url(js/PIE.htc);
	padding-top:20px; 
	padding-bottom:20px;} /* This class works in the same way as the wrapper above and keeps the content inside it in place */
	
.box_cover p{
	font-size:13px; 
	color:#858585; 
	line-height:20px; 
	margin-bottom:10px;} /* This styles the paragraphs within the box_cover class */
	
.box.fright{
	margin-right:0;} /* This class says that the .Box class must float to the right */
	
.box ul{
	padding-left:40px;} /* Baseline style for your unordered lists (ticked bullet points) */
	
.box ul li{
	list-style:none; 
	background:url(../images/right_icon.png) no-repeat left 5px; 
	padding-left:25px; 
	font-size:13px; 
	color:#5e5d5d; 
	line-height:25px;} /* This is the style that is applied to each item in your unordered list individually */
	
#whatdo{}

#whatdo li{
	width:263px;} /* This is the style that is applied to each item in your unordered list individually in the "What you can do" box */

.box h3{
	font-size:18px; 
	font-weight:bold; 
	color:#000; 
	line-height:28px; 
	padding-left:40px; 
	margin-bottom:10px;} /* Baseline styles for the H3 heading tags in your content boxes */
	
.box h3.you{
	background:url(../images/you_icon.png) no-repeat left top;} /* Applies You icon to content box */
	
.box h3.business{
	background:url(../images/business_icon.png) no-repeat left top;} /* Applies Business Icon to content box */
	
.box h3.what{
	background:url(../images/what_icon.png) no-repeat left top;} /* Applies What Icon to content box */

#footer{
	padding-top:15px;} /* Baseline Footer Style */
	
#footer a{
	text-decoration:none; 
	color:#5c5c5d; 
	font-size:13px;} /* Styles Footer Links */
	
#footer a:hover{
	text-decoration:underline;} /* Styles Footer Links when they are hovered over */
	
.socials img{
	margin-left:5px;} /* Styles each social icon individually */
	
.fleft{
	float:left;} /* When applied this class makes items float to the left */
	
.fright{
	float:right;} /* When applied this class makes items float to the right */
	
.right {
	text-align:right;} /* When applied this class makes text align to the right */
	
.clear{
	clear:both;} /* This class is used to reset floats and ensure floated divs/classes sit correctly */

/* ========================================================================  */
/* CSS Resets - helps web page display consistently across browsers          */
/* ========================================================================= */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}

/* ========================================================================  */
/* The 1140px Grid V2 - visit http://cssgrid.net for more information        */
/* ========================================================================= */
.container {padding-left: 20px; padding-right: 20px;}
.row {width: 100%; max-width: 1140px; min-width: 755px; margin: 0 auto;}
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {margin-right: 3.8%; float: left; min-height: 1px;}
.row .onecol {width: 4.85%;}
.row .twocol {width: 13.45%;}
.row .threecol {width: 22.05%;}
.row .fourcol {width: 30.75%;}
.row .fivecol {width: 39.45%;}
.row .sixcol {width: 48%;}
.row .sevencol {width: 56.75%;}
.row .eightcol {width: 65.4%;}
.row .ninecol {width: 74.05%;}
.row .tencol {width: 82.7%;}
.row .elevencol {width: 91.35%;}
.row .twelvecol {width: 100%; float: left;}
.last {margin-right: 0px;}
img, object, embed {max-width: 100%;}
img {height: auto;}
.cf:before, .row:before, .cf:after, .row:after { content: ""; display: table; }
.cf:after, .row:after { clear: both; }
.cf, .row { *zoom: 1; }
*{margin:0; padding:0; border:0; outline:none;}

/* Smaller Desktop screens - Media Queries to make website downscale */
@media only screen and (max-width: 1023px) {
body {line-height: 1.5em;}
}

/* Mobiles & Tablets - Media Queries to make website downscale */
@media handheld, only screen and (max-width: 767px) {
body {font-size: 16px; -webkit-text-size-adjust: none;}
.row, body, .container {width: 100%; min-width: 0; margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px;}
.row .onecol, .row .twocol, .row .threecol, .row .fourcol, .row .fivecol, .row .sixcol, .row .sevencol, .row .eightcol, .row .ninecol, .row .tencol, .row .elevencol, .row .twelvecol {width: auto; float: none; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px;}
}
Thanks in advance