Can't center this ul - html

Question

I have a menu and I can't center an ul inside second_nav. What's wrong with this menu?
This is my normal second nav
/*second_nav*/
#second_nav{
background: url("images/second_nav.png");
height: 255px;
width: 100%;
}
#second_nav ul{
display: block;
margin: 0 0 0 170px;
width: 654px;
position: absolute;
padding: 25px 0 0 0;
}
#second_nav ul li{
display: block;
float: left;
margin: 0 0 0 60px;
height: 220px;
}
#second_nav ul li p{
font-size: 20px;
font-weight: 300;
color: #000000;
text-align: center;
width: 80px;
margin: 0 auto;
}
and this is my second_nav when screen is max- 820px i want to center this.
#second_nav{
height: 255px;
width:100%;.
margin: 0 auto;
}
#second_nav ul{
height: 215px;
margin: 0 auto;
text-align: center;
}
#second_nav ul li{
margin: 0 auto;
display: inline-block;
}
#second_nav ul li img{
width: 80%;
}

Answer 1

Give #second_nav ul an explicit width. Without one, it's 100% of its parent (#second_nav), so there's no room either side to center it using margin: auto.
Try this:
#second_nav ul {
height: 215px;
width: 500px; /* or whatever you need... */
margin: 0 auto;
}

Answer 2

you only need to add the following rules
#second_nav ul {
width: 250px;
margin: 0 auto;
}
look at this example

Answer 3

You can check this:
#second_nav{
height: 255px;
width:100%;
text-align:center;
}
use text-align: center;
but ul need to be inline element "display:inline"

Answer 4

1 thing that I didn't tell. This is my normal second nav
/*second_nav*/
#second_nav{
background: url("images/second_nav.png");
height: 255px;
width: 100%;
}
#second_nav ul{
display: block;
margin: 0 0 0 170px;
width: 654px;
position: absolute;
padding: 25px 0 0 0;
}
#second_nav ul li{
display: block;
float: left;
margin: 0 0 0 60px;
height: 220px;
}
#second_nav ul li p{
font-size: 20px;
font-weight: 300;
color: #000000;
text-align: center;
width: 80px;
margin: 0 auto;
}
and this is my second_nav when screen is max- 820px i want to center this.
#second_nav{
height: 255px;
width:100%;.
margin: 0 auto;
}
#second_nav ul{
height: 215px;
margin: 0 auto;
text-align: center;
}
#second_nav ul li{
margin: 0 auto;
display: inline-block;
}
#second_nav ul li img{
width: 80%;
}