HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Испытание: горизонтальное меню</title>
</head>
<body>
<ul class="main-menu">
<li><a href="/courses">Курсы</a></li>
<li><a href="/demos">Демонстрации</a></li>
<li class="active"><a href="/public_profiles">Участники</a></li>
<li><a href="/achievements">Достижения</a></li>
</ul>
</body>
</html>
CSS
html, body { margin: 0; padding: 0; }
body { width: 430px; min-height: 280px; padding: 10px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.4; background: #ecf0f1; }
.main-menu { padding: 0; margin: 0; width: 430px; background-color:#2980B9; }
.main-menu li { display:inline-block; background-color:#2980B9; margin-right: -4px;
}
.main-menu li a{ display: block; text-decoration: none; color: #FFFFFF; padding: 10px 15px; border-left: 2px solid #2C3E50; margin-left: -1px; }
.active a { background-color: #1ABC9C; }
Путем манипуляций получаю максимум 96%. Чую подвох в бордерах, но, возможно, что-то напутал. Наставьте на путь истинный падавана своего, проблему решить посодействуйте.