Почему не центрируются списки?

Question

Pbalordorbaor @Pbalordorbaor

HTML
CSS

Почему не центрируются списки?

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Визитка</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<link rel="stylesheet" type="text/css" href="fonts/font.ttf">
</head>
<body>
	<div class="navbar">
		<ul>
	      <li><img src="img/Hamburger_icon.svg.png" class="img"></li>
		  <li><a href="#" class="home">Home</a></li>
		  <li class="page"><a href="#" class="item first">first page</a></li>
		  <li class="page"><a href="#" class="item second">second page</a></li>
		  <li class="page"><a href="#" class="item third">third page</a></li>
		</ul>
	</div>
</body>
</html>

CSS

body {
	width: 100%;
}

@media (max-width: 1024px) {

    .navbar {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        background-color: #658680;
        padding-top: 1%;
        padding-bottom: 1%;
        position: fixed;
    }

    .home {
        color: white;
        text-decoration: none;
        font-family: 'FuturaNormal', arial;
        font-size: 25px;
        display: inline-block;
        position: relative;
        margin-bottom: 1%;
    }

    .item {
        color: white;
        text-decoration: none;
        font-family: 'FuturaNormal', arial;
        font-size: 25px;
        display: inline-block;
        position: relative;
        margin-bottom: 1%;
    }

    .img {
        width: 25px;
        height: 25px;
        margin-left: 85%;
    }
}

@media(min-width: 1024px) {

    .img {
        display: none;
    }

.navbar {
	display: flex;
    justify-content: center;
    align-items: center;
	width: 100%;
	background-color: #658680;
	padding-top: 1%;
	position: fixed;
}

.home {
	color: white;
	text-decoration: none;
	font-family: 'FuturaNormal', arial;
	font-size: 25px;
	display: inline-block;
    position: relative;
}

.home::before {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background-color: white;
    transition: width .2s ease-in-out, left .2s ease-in-out;
    left: 50%;
    bottom: -5px;
}

.home::after {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background-color: white;
    transition: width .2s ease-in-out;
    left: 50%;
    bottom: -5px;
}

.home:hover::before {
    width: 50%;
    left: 0;
}

.home:hover::after {
    width: 50%;
}

.item {
	color: white;
	text-decoration: none;
	font-family: 'FuturaNormal', arial;
	font-size: 25px;
    margin-left: 10%;
}

.item::after {
    display: block;
    position: relative;
    content: "";
    height: 2px;
    width: 0;
    background-color: white;
    transition: width .5s ease-in-out;
    left: 0;
    bottom: -5px;
}


.item:hover::after {
	width: 100%;
	left: 0;
}

li {
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}

ul {
    width: 100%;
}