Please help with web page layout_html/css_WEB-ITnose

I want to make a simple little website. I want to write the template for this website myself, but when using CSS to layout web page elements, I find it difficult to control it.
The picture is what this homepage looks like.

How to control the position of the navigation bar.

.
This is what I made, and the difference is huge.
How can I make the width of the navigation the same as that of the parent class. Second, how to make each one distribute the width equally.
This is my code.
aba7b36f87decd50b18c7e3e3c150106
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
09477266eebbc8a01f42387ae29e71dd
b2386ffb911b14667cb8f0f91ea547a7communityAdvance6e916e0f7d1e588d4f442bf645aedb2f
ce4936ead20080b80aacb10152e78ff0
9c3bca370b5104690d9ef395f2c5f8d1


@charset "utf -8";
body {

}
#wrapper {
background-color: #20455A;
width: 100%;
min-width: 740px;
max-width: 1306px;
margin-left: auto;
margin-right: auto;
left: 5%;
right: 5%;
}
header {
background-color: #6CEBE5;
margin-right: auto;
margin-left: auto;
width: 100%;
float: left;
}
#footer ul {
background-color: #6CEBE5;
text-decoration: none;
list-style-type: none;
margin-right: auto;
margin-left : auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: 1306px;
}
#footer li {
width: 33%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px ;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: center;
text -decoration: none;
float: left;
background-color: #6CEBE5;
}
#mainnav li {
width: 20%;
float: left;
}

a {
font-weight: bold;
text-decoration: none;
}


a:link {
color: #FF6600;
}
#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {
text-decoration: none;
background-color: #43A6CB;
}

A:visited {
color: #FF944C;
}
a:hover, a:active, a:focus {
background-color : #7F3300;
text-decoration: underline;
}
#mainnav a {
display: block;
float: left;
text-align: center;
background-color: #4d4d4d;
color: #F1EBEB;
text-transform: uppercase;
padding-top: 6px;
padding-bottom: 6px;
margin-right: auto ;
margin-left: auto;
}
#mainnav ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-right: auto;
margin-left: 0px;
}
#mainnav {
width : 1306px;
margin-right: auto;
margin-left: auto;
float: left;
background-position: left 0%;
}

< ;body>
f005529f17a8328d00deaded84cdd461

6956a6233afcaa7c1311da1271316141
3a36840922094795ad69a5c2b25f2b12
70e08c4adb5744c84e11655c43df03e9
c1b46725553870ff2dfb99c12178b39e
li>9f5763fd43a13358a0e821fe04d27827home5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
;bed06894275b65c1ab86501b08a632eb
                                                                                  25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79volunteer/job5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
        25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79special events5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
        25edfb22a4f469ecb59f1190150159c6fd36ec1cd3c8998a739fe1945b154f79give/donate5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
      929d1f5ca49e04fdcb27f9465b944689
      44f9630a3d507ae7532760da37622b0f
    ab946e7546ab66a280dd9c9f9310ecd5
  16b28748ea4df4d9c2150843fecfba68
  
  7c356abc9db22b8e97544e5d6e8b3483Content for  id "main" Goes Here16b28748ea4df4d9c2150843fecfba68
  
  b6a5815301911e81f068b1b236de27d4
    ff6d136ddc5fdfeffaf53ff6ee95f185
      25edfb22a4f469ecb59f1190150159c62a6abab2c840595328d9aba7696ab8c5Office hours5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
      25edfb22a4f469ecb59f1190150159c62a6abab2c840595328d9aba7696ab8c5Location5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
      25edfb22a4f469ecb59f1190150159c62a6abab2c840595328d9aba7696ab8c5Contact us5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
    929d1f5ca49e04fdcb27f9465b944689
  16b28748ea4df4d9c2150843fecfba68
  
  16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
  73a6ac4ed44ffec12cee46588e518a5e

回复讨论(解决方案)

导航用table不就行了

table宽度设100% 自动就平分了

具体点！新手

 <!doctype html>  <html>  <head>  <meta charset="utf-8">  <title>communityAdvance</title>  <link href="styles/main.css" rel="stylesheet" type="text/css">  <style type="text/css">      body {}#wrapper {background-color: #20455A;width: 100%;min-width: 740px;max-width: 1306px;margin-left: auto;margin-right: auto;left: 5%;right: 5%;}header {background-color: #6CEBE5;margin-right: auto;margin-left: auto;width: 100%;float: left;}#footer ul {background-color: #6CEBE5;text-decoration: none;list-style-type: none;margin-right: auto;margin-left: auto;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;width: 1306px;}#footer li {width: 33%;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;text-align: center;text-decoration: none;float: left;background-color: #6CEBE5;}#mainnav li {width: 20%;float: left;}a {font-weight: bold;text-decoration: none;}a:link {color: #FF6600;}#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {text-decoration: none;background-color: #43A6CB;}A:visited {color: #FF944C;}a:hover, a:active, a:focus {background-color: #7F3300;text-decoration: underline;}#mainnav a {display: block;float: left;text-align: center;background-color: #4d4d4d;color: #F1EBEB;text-transform: uppercase;padding-top: 6px;padding-bottom: 6px;margin-right: auto;margin-left: auto;}#mainnav ul {list-style-type: none;margin-top: 0px;margin-bottom: 0px;padding-top: 0px;padding-bottom: 0px;margin-right: auto;margin-left: 0px;}#mainnav {width: 1306px;margin-right: auto;margin-left: auto;float: left;background-position: left 0%;}  </style>  </head>    <body>  <div id="wrapper">    <div id ="head">    <header id="top">    <img src="LogoUse.png" width="1306" height="473" alt=""/>    <nav id="mainnav">     <!-- <ul>        <li><a href="CommunityAdvance.html">home</a></li>        <li><a href="Untitled-4.html">about us</a></li>        <li><a href="#">programs</a></li>        <li><a href="#">volunteer/job</a></li>        <li><a href="#">special events</a></li>        <li><a href="#">give/donate</a></li>      </ul>-->      <table style="width:100%;text-align:center;">        <tr>            <td style="border-right:1px solid red;">home</td>  <!--线出来了 后面效果自己慢慢调吧-->            <td>about us</td>            <td>>programs</td>            <td>volunteer/job</td>            <td>special events</td>            <td>give/donate</td>        </tr>      </table>      </nav>    </header>  </div>    <div id="main">Content for  id "main" Goes Here</div>    <div id="footer">    <ul>      <li><a href="www.google.com">Office hours</a></li>      <li><a href="www.google.com">Location</a></li>      <li><a href="www.google.com">Contact us</a></li>    </ul>  </div>    </div>  </body>  </html>

CSS能控制网页上的任何HTML元素，你却说很难控制。。。。。。
那是因为你的表格td宽度还是用的别人的宽度，而你的td却增加了一个，所以掉下去了

太感谢了各位。