Can't get list to center when using UL - html

Question

I have several <li> items centered and displaying inline within <ul> tags, but I cannot seem to get the <ul> itself to center on the page. You can see the slight indention problem on this JSFiddle.
Here is the HTML for the list:
<ul>
<li>Home</li> |
<li>Knowing</li> |
<li>Caring</li> |
<li>Working</li> |
<li>Living</li> |
<li>Opportunities</li> |
<li>Medical Staff Services</li>
<br> asdf © 2014
</ul>
Here is the CSS:
body {
font-size: 75%; /* Base browser font size is 14px */
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
text-align: center;
margin: 0 auto;
width: 75%;
clear: both;
}
a, a:link, a:hover, a:active, a:visited {
text-decoration: none;
}
ul {
margin: 0 auto;
}
li {
text-align: center;
display: inline;
}
.footer a:link, .footer a:visited, .footer a:active, .footer a:hover, {
text-align: center;
color: #cccccc;
}
Annoyingly, the list centers if I delete the <ul> tags from the HTML, but that is improper markup and potentially dangerous/problematic.
I've tried a few other suggestions from similar questions, such as positioning a container div left at width: 100%; with position: relative;, positioning the <ul> div left and floating it left 50%, and then positioning the <li> items left and floating them right 50%, but that doesn't work with regard to the | separators that I have in-between each <li> item.
Is my markup somehow still incorrect? Do I have some conflicting CSS values that prevent it from working? Do <ul> lists always indent, no matter what?
EDIT: Added CSS code directly to the post.

Answer 1

<ul> elements have a default padding-left of 40px. Remove it with padding: 0; or padding-left: 0;.
JSFiddle Example
You can use your browser's F12 developer tools to inspect elements and their margins or padding in the future.

Answer 2

Have a look at this example it centers horizontally the list where the menu items have no set width.
See here: http://www.cssplay.co.uk/menus/centered.html
The basic CSS you need:
footer {
clear: both;
float: left;
overflow: hidden;
width: 100%;
}
ul {
float: left;
left: 50%;
list-style-type: none;
margin: 0 auto;
padding: 0;
position: relative;
}
li {
float: left;
position: relative;
right: 50%;
}
Note: I specifically removed the | separators between the LIs as this is not valid HTML.
See the changed example: http://jsfiddle.net/eNQyp/1/ The separators are added as styles on the LIs. It can work your example using this technique and is valid HTML.