Positioning header on the center - html

Question

I've got little problems with my header that has to be symetrically perfect and I'm terrible at this so could you please tell me how to make the it positioned on the center and keep the margin between links?
How should it look like:
I'd also love to know how to make that underline on hover and the simple language switcher.
My code:
<nav id="nav">
<ul style="text-transform:uppercase">
<li>Strona główna</li>
<li>Portfolio</li>
<li><img src="logo.png"></img></li>
<li>O mnie</li>
<li>Kontakt</li>
</ul>
</nav>
CSS:
#nav {
position: absolute;
right: 0.5em;
top: 0;
height: 3em;
line-height: 3em;
margin-left:30%
}
#nav ul {
margin: 0;
}
#nav ul li {
display: inline-block;
margin-left: 0.5em;
font-size: 0.9em;
}
#nav ul li a {
display: block;
color: inherit;
text-decoration: none;
height: 3em;
line-height: 3em;
padding: 0 0.5em 0 0.5em;
outline: 0;
}

Answer 1

Removed a lot of margin and padding from your code.
Added position: relative;, text-align: center;, width: 100%; to #nav.
Also, Added margin:0; and padding:0; to *
Note: You didn't have img in li for some reason.
Change to this:
*{
margin:0;
padding:0;
}
#nav {
position: relative;
top: 0;
height: 3em;
line-height: 3em;
text-align: center;
width: 100%;
}
#nav ul {
margin: 0;
}
#nav ul li {
display: inline-block;
font-size: 0.9em;
}
#nav ul li a {
display: block;
color: inherit;
text-decoration: none;
height: 3em;
line-height: 3em;
padding: 0 0.5em 0 0.5em;
outline: 0;
}
For underline on hover.
Try this:
#nav ul li a:hover {
border-bottom: 3px solid #eee;
}
JSFiddle Demo

Answer 2

Add this to your css to make link underlined when hover.
#nav ul li a:HOVER{
text-decoration : underline;
}

Answer 3

Update your Nav class like below.
#nav {
position: absolute;
right: 0;
top: 0;
left:0;
margin:0px auto;
height: 3em;
line-height: 3em;
}
DEMO

Answer 4

You can center stuff on your webpage with the CSS property text-align:center;
As for the underline on hover? Just add an onhover event handler to it, then use document.getElementById("Makeanidforthestuffyouwantunderlined").class="Someclass";
in your javascript.
Finally, you can go to your CSS, and do this.
.Someclass{
text-decoration:underline;
}
Alternatively, some elements support the "hover" pseudo element.
p:hover{
text-decoration:underline;
}