Hey there, I've been working on this navigation bar for quite some time now and finally found a way to center the menu items. However, I want to make sure I'm doing it the right way. Does anyone have suggestions on how to center all the "li" elements (like Home, About...)?
Currently, I have used padding-left: 30em; to achieve the centered effect but I'm wondering if there's a more efficient way to do it automatically. I tried using padding auto but it didn't work as expected.
Thank you in advance for your assistance!
@media screen and (min-width: 780px) {
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
min-height: 100vh;
}
ul {
list-style: none;
}
a, u {
text-decoration: none;
}
.header-menu {
background-color: grey;
padding: 1em 1em;
width: 100vw;
display: inline-flex;
align-items: center;
}
.header-flex, {
display: inline-flex;
align-items: center;
}
.logo {
cursor: pointer;
}
.main-nav {
cursor: pointer;
padding-left: 30em;
}
.main-nav li {
display: inline-block;
padding: 0em 1.2em;
}
.main-nav a {
color: #34495e;
font-size: .99em;
}
.main-nav a:hover {
color: #718daa;
}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/home.css">
</head>
<body>
<header>
<div class="header-menu">
<h1 class="logo">Logo</h1>
<nav class="header-flex">
<ul class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>Thanks for helping me solve the issue! Here's my updated code:
@media screen and (min-width: 780px) {
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
min-height: 100vh;
}
ul {
list-style: none;
}
a, u {
text-decoration: none;
}
.header-menu, .header-flex {
background-color: grey;
padding: 1em 1em;
width: 100vw;
display: inline-flex;
align-items: center;
}
.logo {
cursor: pointer;
}
.main-nav {
cursor: pointer;
margin: 0 auto;
}
.main-nav li {
display: inline-block;
padding: 0em 1.2em;
}
.main-nav a {
color: #34495e;
font-size: .99em;
}
.main-nav a:hover {
color: #718daa;
}
}