отступы в навигации

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

вот, что у меня: 2

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: линии, которые есть на картинках не нужно делать, это я криво обрезал


Ответы (0 шт):