15/28 100% с nth-child


#1

Удалось добиться 100% только с использованием nth-child во второстепенном меню, без этого в пунктах меню никак не подпираются отступы, видел на форуме решение без nth-child, но не совсем понял, что у меня неправильно и почему без nth-child в пунктах меню никак не подобрать отступы. Если несложно - разъясните подробно, как сделать 100% без nth-child и отрицательных margin, а то просто глядя на чужой код мне непонятно. У меня пока 100% получается только с таким кодом:

html,
body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}

/Это главное меню/
.main-menu {
margin: 0px;
padding: 0px;
width: 200px;
}

/Это пункты главного меню/
.main-menu li {
background-color: #2980b9;
border-bottom: 2px solid #2c3e50;
list-style: none;
}

/Это текст во всех пунктах/
.main-menu a {
display: block;
padding: 10px 15px;
}

/Это первый пункт главного меню/
.main-menu > .active > a {
background-color: #1abc9c;
border-bottom: 2px solid #2c3e50;
}

/Это текст во всех пунктах меню, в том числе и второстепенных/
li > a {
color: #ffffff;
text-decoration: none;
}

/Это второстепенное меню/
.main-menu ul{
padding: 0px;
}

/Это пункты второстепенного меню (знакомства, слекторы и т.д)/
.active > ul > li{
background-color: #ffffff;
border: 0px;
}

/Это первый пункт второстепенного меню/
.active > ul > li:nth-child(1){
padding-top: 5px;
}

/Это второй пункт второстепенного меню/
.active > ul > li:nth-child(2){
margin-top: -10px;
margin-bottom: -10px;
}

/Это третий пункт второстепенного меню/
.active > ul > li:nth-child(3){
padding-bottom: 5px;
}

/Это текст в пунктах второстепенного меню/
.main-menu li li a{
text-decoration: underline;
color: #2980b9;
}

/Изменение фона при наведении/
.main-menu li:hover {
background-color: #1abc9c;
}