Как стилизовать элементы nav ul на следующей строке в центре в CSS ⇐ Html

[Anonymous]

Я хочу оформить элементы навигационной панели li, начиная со следующей строки и заканчивая центром области просмотра, для устройств максимальной ширины 576 пикселей:
Мой html:

Код: Выделить всё

Bibash Acharya Portfolio
[*]






[list]
[url=#][i][/i]Home[/url]
[*][url=#about][i][/i]About Me[/url]
[*][url=#portfolio][i][/i]Portfolio[/url]
[*][url=#contact][i][/i]Contact[/url]
[*]
[i][/i]

[/list]

Мой CSS для максимальной ширины 576 пикселей:

Код: Выделить всё

/*Mobile styles */
@media only screen and (max-width:576px){
#about .about-content{
flex-direction: column;
gap:20px;
text-align: center;
}

#about .about-content figure,
#about .about-content .about-text{
flex:none;
max-width: 100%;
align-items: justify;
}

#about .about-content figure{
order:-1;
};

#about .about-text {
text-align:left;
padding: 0 10px;
}

.footer-main{
flex-direction: column;
align-items: center;
gap:25px;
text-align: center;
}

.footer-column{
flex:none;
width:100%;
max-width: 300px;
}

.footer-column h2{
font-size: 1rem;
margin-bottom: 12px;
}

#about{
padding: 30px 15px;
}

#about h2{
font-size: 1.5rem;
margin-bottom:25px;
}

html.dark-mode #about .about-content{
gap:20px;
}

.footer-socials a {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid #f1f1f1;
display: flex;
align-items: center;       /* Vertically center icon */
justify-content: center;   /* Horizontally center icon */
color: #f1f1f1;
font-size: 1rem;
padding: 0;
opacity: 0.9;
}

.footer-socials{
display:flex;
gap:12px;
margin-top:6px;
justify-content: center;
}

#milestones .milestones-card{
flex-direction: column;
text-align: center;
padding: 20px 18px;
gap:20px;
}

#milestones .milestone-img{
width:100%;
max-width: 300px;
height:200px;
margin:0 auto;
order:-1;
}

#milestones{
padding: 30px 15px;
}

#milestones h2{
font-size: 1.5 rem;
margin-bottom: 25px;
}

html.dark-mode #milestone .milestones-card{
background:#2a2a2a;
}

nav ul {
display:flex;
flex-wrap: nowrap;
justify-content: space-between;  /* space-betweeen*/
gap:0;
padding:0 8px;
margin:0;
width:100%;
box-sizing: border-box;
}

nav li {
flex:1;
text-align:center;
font-size:0.8rem;
white-space: nowrap;
list-style: none;
}

nav ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 8px;
margin: 0;
width: 100%;
box-sizing: border-box;
}

nav li {
flex: 1;
text-align: center;
font-size: 0.8rem;
white-space: nowrap;
list-style: none;
}

nav li a {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 6px 2px;
text-decoration: none;
}

nav .right {
flex: 0 0 auto;
padding: 6px 8px;
order: 5;
}

nav .right i {
font-size: 1.1rem;
display: block;
}

}

Я применил nav ul стиль nav ul: Wrap, чтобы он переходил на следующую строку, а не переполнялся в той же строке. Но я хочу центрировать элементы навигации на следующей строке.
Мой снимок экрана пользовательского интерфейса для размеров 300 * 699:

Как мне изменить CSS, чтобы элементы навигации во второй строке отображались на центр для размера максимальной ширины 300 ?

Подробнее здесь: https://stackoverflow.com/questions/798 ... ter-in-css