您好，我有一个网站，我正在努力使移动响应，但由于某种原因，我的网站的右侧部分突然出现了。并且标题成为页脚
它最初看起来像http://www.templatesbox.com/data/free.templates/images/web/full.preview/14032018641Yd.jpg
我在跟随教程时与Css混淆了 这是代码
/* CSS Document */
body{padding:0px; margin:0px; background:#fff; color:#848484; font:11px/14px Tahoma, Geneva, sans-serif}
div, p, ul, h2, h3, h4, img, form, input, textarea{padding:0px; margin:0px; border:0}
ul{list-style-type:none;}
.clear {clear: both; margin: 0px; height:0}
p a{ font:11px/14px Tahoma, Geneva, sans-serif; color:#17afdb; text-decoration:none;}
p a:hover{ color:#fe0600; text-decoration:none;}
.headline{font:11px/14px Tahoma, Geneva, sans-serif; color:#fe0600; font-weight:bold}
#container{width:775px; margin:0 auto 0 auto; background:url(../images/b_body.jpg) 0 0 no-repeat}
#incontainer{width:90%; margin:0 auto 0 auto;}
/* HEADER */
#headerPan{width:100%; height:337px; position:relative; background:url(../images/header.png) 0 0 no-repeat; margin-bottom:10px}
#headerPan img#logo{position:absolute; top:156px; left:434px}
#headerPan ul.menu{position:absolute; top:28px; left:24px; width:95.84664536741214%; height:27px}
#headerPan ul.menu li{float:left; height:27px; margin-right:40px }
#headerPan ul.menu li a{height:27px; display:block; text-indent:-20000px; }
#headerPan ul.menu li a:hover{height:27px; }
#headerPan ul.menu li.b01 a{ width:13.25878594249201%; background:url(../images/btn_1.png) 0 0 no-repeat; }
#headerPan ul.menu li.b01 a:hover{ width:13.25878594249201%; background:url(../images/btn_1_over.png) 0 0 no-repeat;}
#headerPan ul.menu li.b02 a{ width:11.34185303514377%; background:url(../images/btn_2.png) 0 0 no-repeat; }
#headerPan ul.menu li.b02 a:hover{ width:11.34185303514377%; background:url(../images/btn_2_over.png) 0 0 no-repeat;}
#headerPan ul.menu li.b03 a{ width:8.626198083067093%; background:url(../images/btn_3.png) 0 0 no-repeat; }
#headerPan ul.menu li.b03 a:hover{ width:8.626198083067093%; background:url(../images/btn_3_over.png) 0 0 no-repeat;}
#headerPan ul.menu li.b04 a{ width:18.05111821086262%; background:url(../images/btn_4.png) 0 0 no-repeat; }
#headerPan ul.menu li.b04 a:hover{ width:18.05111821086262%; background:url(../images/btn_4_over.png) 0 0 no-repeat;}
#headerPan ul.menu li.b05{margin-right:0 }
#headerPan ul.menu li.b05 a{ width:11.82108626198083%; background:url(../images/btn_5.png) 0 0 no-repeat; }
#headerPan ul.menu li.b05 a:hover{ width:11.82108626198083%; background:url(../images/btn_5_over.png) 0 0 no-repeat;}
/* CONTENT */
#contentPan{width:100%; position:relative; background:#fff; padding-top:20px;}
#contentPanPages{padding:200px 0; text-align:center; background:#fff;}
#leftPan{width:57.50798722044728&; float:left; margin:0 34px 0 2.236421725239617%;}
#rightPan{width:32.74760383386581%; float:left;}
#welcome{width:57.50798722044728%; margin:0 0 32px 0;}
#welcome h2{width:57.50798722044728%; height:62px; background:url(../images/h_welcome.png) 0 0 no-repeat; margin-bottom:10px}
#welcome img{float:left; margin-right:15px; max-width:100&;}
#next_events{width:57.50798722044728%;}
#next_events h2{width:57.50798722044728%; height:32px; background:url(../images/h_events.png) 0 0 no-repeat; margin-bottom:10px}
#next_events img{float:left; margin-right:15px;}
#history{width:32.74760383386581%; margin:0 0 0 0;}
#history h2{width:32.74760383386581%; height:34px; background:url(../images/h_history.png) 0 0 no-repeat; margin-bottom:10px}
#history p.maintext{margin-bottom: 12px; padding-bottom:12px; border-bottom:#a9a9a9 1px dotted }
#history img{float:left; margin-right:10px;
/* FOOTER */
#footerPan{width:626px; height:63px; margin:0 auto; background:url(../images/b_footer.jpg) 0 0 no-repeat}
#footerPan p{padding: 18px 0 0 0; font:10px/14px Tahoma, Geneva, sans-serif; font-weight:normal; color:#848484; text-align:center}
#footerPan p span{ font:10px/14px Tahoma, Geneva, sans-serif; color:#848484;}
#footerPan p a{ font:10px/14px Tahoma, Geneva, sans-serif; color:#848484; text-decoration:none; padding: 0 3px; font-style:normal; font-weight:normal; text-transform:uppercase }
#footerPan p a:hover{ font:10px/14px Tahoma, Geneva, sans-serif; text-decoration:underline; font-style:normal; font-weight:normal; text-transform:uppercase}
这是html以防万一
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sky Diving Club</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="pngfix.js"></script>
</head>
<body>
<div id="container">
<div id="incontainer">
<div id="headerPan">
<ul class="menu">
<li class="b01"><a href="index.html" title="home">home</a></li>
<li class="b02"><a href="about.html" title="about me">about us</a></li>
<li class="b03"><a href="events.html" title="events">events</a></li>
<li class="b04"><a href="gallery.html" title="photo gallery">photo gallery</a></li>
<li class="b05"><a href="contacts.html" title="contacts">contacts</a></li>
</ul>
<img src="images/logo.png" alt="" name="logo" width="154" height="96" id="logo" />
</div>
<div id="contentPan">
<div id="leftPan">
<div id="welcome">
<h2></h2>
<img src="images/img_welcome.jpg" width="135" height="87" alt="" />
<p><span class="headline">Lorem ipsum dolor sit amet, consectetuer lobortis purus vel </span><br />
Nunc laoreet lacinia nunc. In volutpat sodales ipsum. Sed vestibulum. Integer in ante. Mauris tincidunt, quam ac porta viverra, turpis sapien <a href="#">| more</a></p>
<div class="clear"></div>
</div>
<div id="next_events">
<h2></h2>
<img src="images/img_events.jpg" width="135" height="87" alt="" />
<p><span class="headline">Lorem ipsum dolor sit amet, consectetuer lobortis purus vel </span><br />
Nunc laoreet lacinia nunc. In volutpat sodales ipsum. Sed vestibulum. Integer in ante. Mauris tincidunt, quam ac porta viverra, turpis sapien <a href="#">| more</a></p>
<div class="clear" style="height:15px"></div>
<p class="maintext">Mauris tincidunt, quam ac porta viverra, turpis sapien egestas mauris, et suscipit nulla orci sed odio. In ac sem Mauris tincidunt</p>
</div>
</div>
<div id="rightPan">
<div id="history">
<h2></h2>
<p class="maintext">Mauris tincidunt, quam ac porta viverra, turpis sapien egestas mauris, et suscipit nulla orci sed odio. In ac sem Mauris tincidunt, quam ac porta viverra</p>
<img src="images/img_history.jpg" alt="" width="66" height="66" />
<p><span class="headline">Donec lobortis </span><br />
Lorem ipsum dolor sit amet, conse ctetuer adipiscing elit. Nam eu </p>
<div class="clear" style="height:15px"></div>
<img src="images/img_history-03.jpg" alt="" width="66" height="66" />
<p><span class="headline">Donec lobortis </span><br />
Lorem ipsum dolor sit amet, conse ctetuer adipiscing elit. Nam eu </p>
<div class="clear" style="height:15px"></div>
<img src="images/img_history-05.jpg" alt="" width="66" height="66" />
<p><span class="headline">Donec lobortis </span><br />
Lorem ipsum dolor sit amet, conse ctetuer adipiscing elit. Nam eu </p>
<div class="clear" style="height:15px"></div>
</div>
</div>
<div class="clear" style="height:20px"></div>
</div>
<div id="footerPan">
<p><a href="index.html">home</a> | <a href="about.html">about US</a> | <a href="events.html">events</a> | <a href="gallery.html">gallery</a> | <a href="contacts.html">contacts</a><br/>
<span>Copyright © Sky Diving Club. All rights reserved.</span></p>
</div>
</div>
</div>
</body>
</html>
任何想法？