Centering Navigation Bar with CSS - html

Question

I realize this question has been asked multiple times on this site, and many many others, probably too many times, I've tried many different solutions but haven't come up with one that fits, I'm trying to auto center with hidden overflow, any CSS masters willing to show me where I'm going wrong? I've been banging my head for awhile now. Here is my
fiddle Thank you for any assistance.
Here is my CSS since fiddle must be accompanied
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
.navigation {
position: relative;
left: 15%;
padding: 0 auto;
list-style: none;
text-align: center;
display: inline-block;
}
.navigation li {
float: left;
width: 150px;
position: relative;
}
.navigation li a {
background: #262626;
color: #fff;
display: block;
padding: 8px 7px 8px 7px;
text-decoration: none;
border-top: 1px solid #F2861D;
text-align: center;
text-transform: uppercase;
}
.navigation li a:hover {
color: #F2861D;
}
.navigation ul {
position: absolute;
left: 0;
display: none;
margin: 0 0 0 -1px;
padding: 0;
list-style: none;
border-bottom: 3px solid #F2861D;
}
.navigation ul li {
width: 150px;
border-top: none;
}
.navigation ul a {
display: block;
height: 15px;
padding: 8px 7px 13px 7px;
color: #fff;
text-decoration: none;
border-top: none;
border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover {
color: #F2861D;
}
This is the closest I've gotten, I've attempted margin: 0 auto as well as margin-left:auto;
margin-right:auto; but can't seem to get them to work.

Answer 1

try this add a .container{width:you want; margin:0 auto;} then navigation bar in center.
http://jsfiddle.net/bsyxG/7/
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
margin:0;
padding:0;
}
.container{
width:1004px;
margin:0 auto;
text-align:center;
}
.navigation {
text-align: center;
display:inline-block;
list-style-type:none;
text-align:center;
}
.navigation li {
float: left;
width: 150px;
position: relative;
}
.navigation li a {
color: #fff;
display: block;
padding: 8px 7px 8px 7px;
text-decoration: none;
border-top: 1px solid #F2861D;
background: #262626;
text-align: center;
text-transform: uppercase;
}
.navigation li a:hover {
color: #F2861D;
}
.navigation ul {
position: absolute;
left: 0;
display: none;
margin: 0 0 0 -1px;
padding: 0;
list-style: none;
border-bottom: 3px solid #F2861D;
}
.navigation ul li {
width: 150px;
border-top: none;
}
.navigation ul a {
display: block;
height: 15px;
padding: 8px 7px 13px 7px;
color: #fff;
text-decoration: none;
border-top: none;
border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover {
color: #F2861D;
}

Answer 2

You can use left: 50% left:-50% trick
.wrapper {
position: relative;
left: 50%;
}
.navigation {
position: relative;
left: -50%;
}
http://jsfiddle.net/bsyxG/4/

Answer 3

Use This:
Changes are position:absolute from relative and margin-left:auto; margin-right:auto
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
.navigation {
position: absolute;
padding: 0 auto;
list-style: none;
text-align: center;
display: inline-block;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.navigation li {
float: left;
width: 150px;
position: relative;
}
.navigation li a {
background: #262626;
color: #fff;
display: block;
padding: 8px 7px 8px 7px;
text-decoration: none;
border-top: 1px solid #F2861D;
text-align: center;
text-transform: uppercase;
}
.navigation li a:hover {
color: #F2861D;
}
.navigation ul {
position: absolute;
left: 0;
display: none;
margin: 0 0 0 -1px;
padding: 0;
list-style: none;
border-bottom: 3px solid #F2861D;
}
.navigation ul li {
width: 150px;
border-top: none;
}
.navigation ul a {
display: block;
height: 15px;
padding: 8px 7px 13px 7px;
color: #fff;
text-decoration: none;
border-top: none;
border-bottom: 1px dashed #6B6B6B;
}
.navigation ul a:hover {
color: #F2861D;
}