Пытаюсь сделать сайт с нуля. Я новичок:)
Здесь код HTML докумета:
<!DOCTYPE html>
<html leng="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Bla-bla-bla">
<title>Heroes</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=IM+Fell+English+SC" rel="stylesheet">
</head>
<body>
<div class="header">
<ul class="main-navigation">
<li class="col"><p>Heroes</p></li>
<li class="col"><a href="#gerald">Gerald of Rivia</a></li>
<li class="col"><a href="#hawke">Hawke</a></li>
<li class="col"><a href="#corvo">Corvo Attano</a></li>
<li class="col"><a href="#batman">Batman</a></li>
</ul>
</div>
</body>
</html>
А вот мой CSS код:
/* BASE FOR WHOLE WEBSITE */
html,
body {
font-family: "IM Fell English SC";
font-size: 30px;
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
}
/* MAIN NAVIGATION */
.main-navigation {
width: 100%;
}
.main-navigation li {
display: inline-block;
width: 20%;
}
.main-navigation li a:link,
.main-navigation li a:visited {
color: #000;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-bottom 0.7s;
}
.main-navigation li a:hover,
.main-navigation li a:active {
border-bottom: 2px solid #00cec9;
background-color: aquamarine;
}
У меня 2 вопроса.
Первый: У меня 5 объектов li. Я хочу их расстянуть на весь экран. Так как их 5, то размер каждого должен быть 20%, но из-за какого-то расстояния между ними 5-й объект никогда не помещается. Как это исправить?
Второй: Сейчас бирюзовым цветом подсвечивает только фон у текста, а я хочу, чтобы подсвечивало весь объект. Не знаю, как объяснить:) В общем, чтобы это верхее "меню" делилось на 5 одинаковых частей и подсвечивалось таким цветом полностью, а не только там, где есть текст.
Знаю, объяснил не очень вразумительно, но попытаться стоило.
Буду очень благодарен за помощь!
