Navigation with algin:center - html-lists

Question

i have here a little example side to learn HTML.
This is the HTML part:
<!-- header open -->
<header role="banner">
<h1>Beispielaufgaben zu HTML5<br>und CSS3</h1>
<nav class="clearfix">
<ul>
<li>HOME</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</nav>
</header>
<!-- header close -->
This is the CSS part:
html {
margin:0;
pading:0;
}
.wrapper {
width:90%;
max-width:1500px;
margin-top:2%;
margin-left:auto;
margin-right:auto;
}
header h1 {
font-size:350%;
text-align:center;
background-color:#999;
}
nav ul li {
background-color:#CCC;
display:block;
float:left;
width:20%;
font-size:200%;
text-align:center;
}
}
I want that the navigation is centered like h1, but i didnt will work with a bunch of testet ways...
anyone knows a solution?

Answer 1

I made a few changes to the CSS and it should do what you want now:
html {
margin:0;
pading:0;
}
.wrapper {
width:90%;
max-width:1500px;
margin-top:2%;
margin-left:auto;
margin-right:auto;
}
header h1 {
font-size:350%;
text-align:center;
background-color:#999;
}
nav ul li {
background-color:#CCC;
display:block; /*Changed to display: inline-block to replace float*/
float:left; /*Removed because would interfere with added text-align on nav*/
width:20%;
font-size:200%;
text-align:center; /*Removed because not needed*/
}
} /*Removed random closing curly bracket*/
nav {
text-align: center; /*Added to align all <li> in center*/
}
Fiddle: http://jsfiddle.net/U6Khy/1/