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.









@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>

< img src="LogoUse.png" width="1306" height="473" alt=""/>

li>home
;
                                                                                  

volunteer/job

        

special events

        

give/donate

      
      

    

  

  
  Content for  id "main" Goes Here

  
  
    

      
• Office hours

      
• Location

      
• Contact us