Center nav list and remove default spacing? - html

Question

I have a nav list that i centered, but there is some default spacing that i don't want. Also in the fiddle example you can't see it, but on my end the nav list isn't really centered with the same css etc. Maybe someone can look at the code to see if it really centers the nav list.
--> Fiddle
<header>
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Work</span></li>
<li><span>Information</span></li>
</ul>
</nav>
</header>

Answer 1

You should remove the whitespace between the li elements. As example jsFiddle
<ul>
<li><span>Home</span></li><li>
<span>Work</span></li><li>
<span>Information</span></li>
</ul>

Answer 2

You can set font-size: 0 to ul element and on li the one you want. For example:
/************************************************
Site Name:
Author:
************************************************/
html {
margin: 0;
padding: 0;
position: relative;
min-height: 100%;
overflow-y: scroll;
}
body {
font-family: regular, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 18px;
line-height: 1.4;
text-transform: none;
letter-spacing: 0;
color: #111;
}
body,
input,
textarea,
select,
button {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
}
:hover {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
b,
strong {
font-weight: normal;
}
a,
a:visited {
color: #111;
text-decoration: underline;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
h1,
nav {
font-size: 18px;
font-weight: normal;
text-transform: uppercase;
text-decoration: none;
text-align: center;
letter-spacing: 2px;
background-color: transparent;
}
h1 {
margin: 0 0 26px 0;
}
p {
margin: 0 0 16px 0;
background-color: transparent;
}
p a:hover,
a:focus,
a:active {
color: #111;
text-decoration: none;
}
h1 a,
a:visited {
color: #111;
text-decoration: none;
}
h1 a:hover,
a:focus,
a:active {
color: #111;
text-decoration: underline;
}
.center {
width: 500px;
height: 500px;
margin: 0 auto;
background-color: green;
}
/************************************************
Header - Footer - Navigation
************************************************/
header {
position: fixed;
width: 100%;
line-height: 55px;
top: 0;
left: 0;
margin: 0;
padding: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.70);
}
/* Navigation */
nav {
display: block;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 0;
/*set font size 0*/
}
nav li {
display: inline-block;
padding: 0 0;
font-size: 16px;
}
nav a {
position: relative;
display: block;
color: white;
text-decoration: none;
background-color: red;
}
nav a:visited,
a:active {
color: white;
text-decoration: none;
}
nav a:hover span {
transition: none;
text-decoration: none;
border-bottom: 2px solid white;
}
/* Dropdown */
/*nav li:hover a {
background-color: #444;
}
nav li ul {
position: absolute;
float: left;
z-index: 1;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
nav li:hover ul {
opacity: 1;
visibility: visible;
}
nav li ul li {
float: none;
width: 100%;
}
nav li ul a:hover {
color: #999;
}*/
<header>
<nav>
<ul>
<li><span>Home</span>
</li>
<li><span>Work</span>
</li>
<li><span>Information</span>
</li>
</ul>
</nav>
</header>
<div class="center"></div>
You can also set a border to li elements to seperate from each other.

Answer 3

Another way is to use the comment tags between the lines.
<ul>
<li><span>Home</span></li><!--
--><li><span>Work</span></li><!--
--><li><span>Information</span></li>
</ul>