css - I need help centering a ul item within a div containing a 100% width background -

css - I need help centering a ul item within a div containing a 100% width background -

i new html , css. taking class on html5 , css3. required create website class. have started creating layout , having problem getting navigation @ top centered on page. there ul 100% background cannont buttons (text) centered without ul no longer beingness 100% width. ` here css code:

#horizontalnav { display: block; } #horizontalnav li { float: left; margin-left: 13px; margin-right: 30px; } #horizontalnav ul { overflow: hidden; background-color: #003300; width: 100%; margin: 0; padding: 0; list-style-type: none; }

/* button styles*/

#horizontalnav a.navbtn { color: #009933; font-size: 1.8em; text-decoration: none; font-family: impact, charcoal, sans-serif; } #horizontalnav a.navbtn:hover { color: #ffff99; }

/*drop downwards menu */

#horizontalnav ul li:hover ul { display: block; } #horizontalnav ul ul { display: none; position: absolute; min-width: 150px; max-width: 150px; padding-top: 2px; padding-bottom: 8px; margin-left: -10px; } #horizontalnav ul ul li { display: block; clear: both; } #horizontalnav ul ul li { color: #009933; font-size: 1.4em; font-family: impact, charcoal, sans-serif; text-decoration: none; } #horizontalnav ul ul li a:hover { color: #ffff99; }`

as comment stated, cannot center floated elements. utilize display: inline-block;

change

#horizontalnav li { float: left; margin-left: 13px; margin-right: 30px; }

to

#horizontalnav li { display: inline-block; margin-left: 13px; margin-right: 30px; }

css