So formatieren Sie die Navigationselemente in der nächsten Zeile in der Mitte in CSS ⇐ HTML

[Anonymous]

Ich möchte die Navigationsleisten-LI-Elemente von der nächsten Zeile bis zur Mitte des Ansichtsfensters für Geräte mit einer maximalen Breite von 576px formatieren:
Mein HTML:

Code: Select all

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]

Mein CSS für max-width 576px:

Code: Select all

/*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;
}

}

Ich habe nav ul den Stil nav ul: wrap angewendet, damit es zur nächsten Zeile geht, anstatt in derselben Zeile überzulaufen. Aber ich möchte die Navigationselemente in der nächsten Zeile zentrieren.
Mein Screenshot der Benutzeroberfläche für die Abmessungen 300 * 699:

Wie soll ich mein CSS ändern, damit Navigationselemente in der zweiten Zeile in der Mitte angezeigt werden? die Abmessung für die maximale Breite 300 ?