Прошел на 100%., но походу адовый код, есть чувство что можно как-то упростить. Кто что скажет?

Курсы §13. Мастерская: создаём меню
21

Вроде как ничего лишнего

тыц 

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 {
  background: #2980b9;
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
  display: inline-block;
  border-left: 2px solid #2c3e50;
  padding: 10px 15px;
  margin-right: -5px;
}

a {
  color: #ffffff;
  text-decoration: none;
}

.active {
  background: #1abc9c;
}
22

ul – блочный элемент, по умолчанию растягивается по ширине родительского элемента.
Вы изменили ширину body { width: 600px; … }.
20 строку пришлось добавить из-за изменённой ширины.
Чтобы убрать 20 строку – нужно вернуть ширину body { width: 400px; …}.

24 строку можно убрать, если изменить размер у последнего пункта меню:

.main-menu li:last-child a {
  padding-right: 42px;
}

…или, чтобы не нарушалась кратность 5:

.main-menu li:last-child a {
  padding-right: 40px;
  border-right: 2px solid #2980b9;
}
23

100%, никаких костылей и отклонения от задания. Смотрите где маргин, паддинг, фон, бордюры

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 {
padding: 0;
padding-left: 5px;
margin: 0;
background-color: #2980b9;

}
.main-menu li {
display: inline-block;
padding: 10px 15px;
border-left: 2px solid #2c3e50;
margin-left: -5px}

.main-menu a {
color: #ffffff;
text-decoration: none;
display: block;
}

.main-menu .active {background-color: #1abc9c}