Элемент Inline-block падает во вторую строку при подаче наложения

Question

Как указано в заголовке, элемент элемента списка встроенных блоков падает во вторую строку. Как я буду держать их всех в центре и на одной линии? Благодаря! Ниже я разместил полный код css вместе с изображением.

CSS:

body { 
    margin: 0; 
} 

nav { 
    position: fixed; 
    background-color: #000000; 
    width: 100%; 
    margin: 0; 
} 

nav .container { 
    display: table; 
    margin: 0 auto; 
} 

nav .container ul { 
    margin: 0; 
} 

nav .container ul li { 
    list-style: none; 
    color: #FFFFFF; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 

nav .container ul li:nth-child(1n+2) { 
    margin-left: 5%; 
} 

Image Here

Answer 1

Если что-то не ясно, не стесняйтесь спрашивать меня.

nav .container { 
    display: block; 
    text-align: center; 
    padding: 5px; 
} 

Не знаю, но подчеркивание сильно меня беспокоит на черном фоне. Если вы хотите удалить его, добавьте это в css. (но вы, вероятно, знаете это)

a { 
    text-decoration: none; 
} 

Answer 2

Чтобы получить его, вам нужно сделать несколько изменений CSS. Пожалуйста, попробуйте ниже CSS, он работает

body { 
    margin: 0; 
} 

nav { 
    position: fixed; 
    background-color: #000000; 
    width: 100%; 
} 


nav .container ul { 
    display: table; 
    width: 100%; 
} 

nav .container ul li { 
    list-style: none; 
    color: #FFFFFF; 
    display: table-cell; 
    text-align: center; 
} 

nav .container ul li:nth-child(1n+2) { 
    margin-left: 5%; 
}