Почему есть пробелы, разделяющие элементы списка из его parentr?

Question

Это моя первая реализация стандартного html nav. Тем не менее элементы списка внутри nav не располагаются внутри nav так, как я их хочу, и хотя я изменил большинство очевидных свойств, которые приходят на ум, я не смог:

• Центр элементы Li внутри нав
• Сделать ширина элементов Li прекрасно вписываются в нав

Я не понимаю, почему они по умолчанию, расположенным так неловко справа от своего родительского контейнера, или почему установка 'width: 100%' не является решением. Когда я устанавливаю позиционирование на элементах li в абсолютном порядке, кажется, что он замалчивает все, поскольку мне нужно, чтобы каждый элемент списка располагался относительно того, где находится элемент до его размещения.

Кажется, есть несколько возможных путей решения этой проблемы, но они кажутся хакерскими, и мне интересно, есть ли более очевидное решение, которого мне не хватает, чтобы увидеть.

nav { 
 
    width: 40%; height: 500px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    position: relative; 
 
    border: 2px solid black; 
 
} 
 

 
nav ul li { 
 
    list-style: none; text-align: center; 
 
    width: 99%; height: 100%; 
 
    position: inherit; 
 
    padding: 1%; 
 
    border: 2px solid black; 
 
    border-top: none; 
 
    margin: 0; 
 
    display: block; 
 
    background: blue; 
 
}

<nav><!-- 
 
    --><ul><!-- 
 
    --><li class="user">WelcomeVids</li> 
 
     <li class="user">Diablo</li> 
 
     <li class="user">FreeCodeCamp</li> 
 
     <li class="user">OtherStuff</li> 
 
     <li class="user">Dota2</li><!-- 
 
    --></ul><!-- 
 
--></nav>

Чтобы увидеть результат, вид мой Codepen: http://codepen.io/sentedelviento/full/grzrgR/

Answer 1

Это происходит потому, что большинство браузеров по умолчанию для добавления padding-left к <ul>. Вы можете переопределить:

/* Added */ 
 
ul { 
 
    padding-left: 0; 
 
} 
 

 
nav { 
 
    width: 40%; height: 500px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    position: relative; 
 
    border: 2px solid black; 
 
} 
 

 
nav ul li { 
 
    list-style: none; text-align: center; 
 
    /* width: 99%; height: 100%; */ 
 
    position: inherit; 
 
    padding: 1%; 
 
    border: 2px solid black; 
 
    border-top: none; 
 
    margin: 0; 
 
    display: block; 
 
    background: blue; 
 
}

<nav><!-- 
 
    --><ul><!-- 
 
    --><li class="user">WelcomeVids</li> 
 
     <li class="user">Diablo</li> 
 
     <li class="user">FreeCodeCamp</li> 
 
     <li class="user">OtherStuff</li> 
 
     <li class="user">Dota2</li><!-- 
 
    --></ul><!-- 
 
--></nav>

Answer 2

Я бы рекомендовал следующие изменения в CSS:

nav ul { 
    margin: 0; 
    padding: 0; 
} 

nav ul li { 
    box-sizing: border-box; 
    width: auto; 
}