ขอความช่วยเหลือ จัด เลเอาท์ Css ใน Smart phone พยายามแล้วยังจัดไม่ได้

<div class="line"></div>
<menu id="footer">  
    <ul>
       <li style="float:left;"><a href="#">La Casetta</a></li>
       <li style="float:right;"><a href="#">Town Square</a></li>	
    </ul>
</menu> 
<div class="control_width">
<div class="footer">
	<ul>
       <li><a href="#"><span class="icon-facebook"/></span></a></li>
       <li><a href="#"><span class="icon-instagram"></span></a></li>
       <li><a href="#"><img src="imgs/tripadvisor.png" /></a></li>
    </ul>
 </div>
 </div>
<div class="line"></div>
<br />

 /* Smart Phone (portrait)*/
@media screen and (max-width: 320px) {
/*Footer Web*/
#footer {
    margin:0 auto;
    width:885px;
    }
	   
#footer ul {
    list-style:none;
	text-transform:uppercase;
	font:normal;
	margin-left:-75px;
    }
     
#footer ul li {
    display:inline-block;
    line-height:3.5em;
	font-size:20px;
    }
     
#footer ul li a {	
	margin:1.0rem;
	color:#333;
	text-decoration:none;
    }
     
#footer ul li a:hover {
	color:#FF6600;
    }
	
/*Facebook,instagram,tripadvisor*/
.footer{
	margin-left:auto; 
	margin-right:auto;
	width:985px;
}

.footer ul{
	margin-top:55px;
	/*margin-left:85px;*/
	text-align:center
	line-height:2.4em;
	/*text-align:center;*/
}

.footer ul li{
	display:inline;
	font-size:25px;
	/*margin:0.5rem;*/
}
}