How can i put align my contents in the navigation bar in the middle without adding padding? I do not want to increase the background. There's no details else to add. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you.
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
nav ul li a {
font-size: 26px;
color: white;
}
ul {
position: fixed;
width: 100%;
height: 50vh;
background: #091624;
top: auto;
left: auto;
text-align: center;
}
nav ul li {
display: block;
margin: 20px 0;
line-height: normal;
}
a.content,
a:hover {
background: #1b9bff;
transition: .5s;
}
@media screen and (min-width: 768px) {
nav {
height: 80px;
width: 100%;
}
nav ul {
position: fixed;
float: right;
margin-right: 40px;
text-align: right;
height: 60px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/styles.css">
<title>Responsive Navigation Bar</title>
</head>
<body>
<nav>
<ul class="content">
<li><a href="#">About</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Learning Paths</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>