求大佬帮帮我改下我的html代码 - html吧

level 1

没有名字🌚🌞🌝 楼主

我需要的是

我做出来的效果是

怎么调试都没法让他们居中，求大佬帮帮我
我的源代码是
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"content="text/html;charset=gb2312"/>
<title>使用DIV+CSS对网页进行布局</title>
<style type="text/css">
#wrapper { width:780px; height:18em; border:1px solid; margin:0 auto; }
#banner { width:780px; height:3em; background-color:yellow; padding:0; margin:0 auto }
#naviBar { width:780px; height:2.2em; background-color:lightgrey; padding:0; margin:0 auto; }
ul { width:780px; padding:0; margin:0 auto; list-style:none; }
li { float:left; width:260px; padding:10px 0; text-align:center; }
a { text-decoration:none; color:red; }
a:hover { color:purple; }
#content { float:left; display:inline; width:680px; height:13em; background-color:lightgreen; }
#adsBar { float:left; display:inline; width:100px; height:13em; background-color:lightpink; }
#footer { clear:both; width:780px; height:1.6em; margin:0 auto;background-color:skyblue; }
</style>
</head>
<body>
<div id="banner">标题（banner）</div>
<div id="naviBar">
<ul>
<li><a href="#">水平导航条（naviBar）</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<ul>
</div>
<div id="content">正文区（content）</div>
<div id="adsBar">广告区（adsBar）</div>
<div id="footer">底部（footer）</div>
</body>
</html>

2018年12月23日 03点12分 1

level 1

没有名字🌚🌞🌝 楼主

求大佬来啊

2018年12月23日 04点12分 2

level 12

迪吖º

创一个父盒子，固定宽，居中

2018年12月23日 06点12分 4

没有名字🌚🌞🌝

父盒子是maincontent吗然后content和adsbar是从属于maincontent吗

2018年12月23日 10点12分