Как мне починить панель навигации?
Я хочу исправить свою навигационную панель, но не знаю, как это сделать.
Улучшения, которые я хочу сделать, таковы:
1. Как изменить цвет шрифта на Белый (я пробовал шрифт: #ffffff, как вы можете видеть в кодировке)?
2. Как сделать ссылку разнесенной?
3. Как переместить ссылки в самое правое положение (float, похоже, не работает, как вы можете видеть в кодировке)?
4. Как сделать шрифт больше для панели навигации (шрифт: 20px, похоже, не работает, как вы можете видеть в кодировке)?
5. Как сделать заголовок "Grass World Sport News" больше?
Что я уже пробовал:
Вот этот html код:
<DOCTYPE html>
<head>
<title> GWS News</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<header>
<div class="container">
<h1> Grass World Sport News</h1>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="file:///Users/rarichenjoseph/Desktop/GWS%202/Website.html#">World Cup</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Schedule</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="banner">
<img class="banner-image" src=img/banner1.jpeg>
</div>
</header>
</body>
Вот это css:
html,body{
background-color: #5f5f5f;
margin: 0;
padding: 0;
font-family: sans-serif;
}
div.container{
max-width: 1200px;
margin: 0;
padding: 0 30px;
}
header{
background-color: #000000;
float: left;
width: 100%;
}
header h1{
color: #ffffff;
text-transform: uppercase;
float: left;
}
.nav {
float: right;
list-style-type: none;
list-style: none;
padding: 10px 100px;
}
.nav li {
display: inline-block;
}
.nav ul li a{
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
font-size: 15px;
font-family: "Roboto", sans-serif;
}
.nav li a:hover{
color: #D3D3D3;
border: 1px solid white;
}
.nav li.active a{
border: 1px solid white;
}
.banner-image {
width: 100%;
}