отступы в навигации
хотелось бы расположить элементы nav'a на одинаковом расстоянии друг от друга
вот, как должно быть:

a {
text-decoration: none; /* убираем подчёркивание у ссылки */
}
li {
list-style-type: none; /* Убираем маркеры */
}
.container {
margin: 0 230px;
}
header .q1 {
float: left;
color: #454545;
font-family: 'Pacifico', sans-serif;
font-weight: 200;
font-size: 40px;
}
header ul {
float: right;
font-family: 'Bebas Neue', serif;
}
header ul li {
float: left;
}
header a {
font-size: 25px;
color: #454545;
}
header ul li div {
font-size: 15px;
color: #BFBFBF;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>About</title>
<link href="about.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="img_Blitz/mini3.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue|Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="C:\Users\Екатерина\Desktop/Blitz\img_Blitz\mini3.ico" type="image/x-icon">
</head>
<body>
<header class="container">
<div class="q1">Blitz</div>
<ul>
<li>
<div>Homepage</div>
<a href="C:\Users\Екатерина\Desktop\Blitz\home.html">Home</a>
</li>
<li>
<div>Who we are?</div>
<a href="C:\Users\Екатерина\Desktop\Blitz\about\about.html">About</a>
</li>
<li>
<div>My portfolio</div>
<a href="#">Projects</a>
</li>
<li>
<div>Latest news</div>
<a href="#">Blog</a>
</li>
<li>
<div>Get in touch</div>
<a href="#">Contact</a>
</li>
</ul>
</header>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<footer></footer>
</body>
</html>
Upd :Здесь как-то криво исполняется код, у меня в браузере всё отображается, как на 2 картинке
Upd2: линии, которые есть на картинках не нужно делать, это я криво обрезал
