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 {
width: 200px;
padding: 0;
margin: 0;
list-style: none;
}
.main-menu>li {
width: 200px;
border-bottom: 2px solid black;
background-color:#2980B9;
}
.main-menu a{
display:block;
padding:10px 15px;
text-decoration:none;
color:#FFFFFF;
}
.main-menu ul {
padding: 0;
margin: 0;
list-style: none;
}
.main-menu li li a{
text-decoration:underline;
background :#FFFFFF;
color:#2980B9;
padding:10px;
}
.main-menu > .active > a {
color: white;
background: #1ABC9C;
border-bottom: 2px solid black;
}
.main-menu li a:hover {background:#1ABC9C;
}
ВЫ могли бы подсказать: в каком месте я неправильно понимаю?
где убрать отступ, чтоб совпало??
Спасибо!
P.S. Я другие варианты смотрела, но я не понимаю почему люди сделали именно так.