20/28 на 100%. С hover который подсвечивает последний пункт полностью

Курсы §13. Мастерская: создаём меню
1 
html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 400px;
  min-height: 280px;
  padding: 10px;

  font-size: 14px;
  line-height: 1.4;
  font-family: "Arial", sans-serif;

  background-color: #ecf0f1;
}

.main-menu {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.main-menu li {
  display: inline-block;
  margin-right: -5px;
}

.main-menu a {
  display: block;
  width: 100%;
  padding: 10px 15px;
  color: white;
  background-color: #2980b9;
  text-decoration: none;
  border-left: 2px solid #2c3e50;
}

.main-menu a:hover {
  background-color: #4ba2db;  
}

.active a {background-color: #1abc9c;}
2

Код, в целом не плох. Но мне кажется, что лучше всего было написать
.main-menu > .active> a {
background-color:#1abc9c;
}
вместо
.main-menu a:hover {
background-color: #4ba2db;
}