I am currently facing a challenge with centering my nav bar and I'm not sure how to proceed. The nav bar is placed within a class and a div, which is causing confusion for me. I have attempted to align it to the center and also tried using float:center without success.
body {
background-color: #000000;
}
div {
min-height: 75px;
line-height: 75px;
text-align: center;
color: #57df13;
font-weight: bold;
font-family: verdana, sans-serif;
}
.inner {
width: 50%;
max-width: 960px;
margin: 0 auto;
}
.header .inner {
font-size: 125%
}
.menu .inner ul {
list-style-type: none;
}
.menu .inner li {
float: left;
padding-left: 18px;
transition: all .3s ease-in-out;
}
.menu .inner li:hover {
font-size: 150%;
}<head>
<title>PandaGamingNetwork</title>
<link href="CSS/master.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="inner">
<h1> PandaGamingNetwork </h1>
</div>
</div>
<div class="menu">
<div class="inner">
<ul>
<li> Home </li>
<li> About </li>
<li> Vids </li>
<li> Memes </li>
</ul>
</div>
</div>
</body>