Nav bar not centering

Question

I have a footer and I'm trying to center a <nav> bar in the middle.

I used margin: 0 auto; but it's not working. I know that I can use position: absolute or relative but I would rather not use those.

 footer { height: 300px; background-color: black; margin-top: 50px; } footer nav { width: 100%; display: inline-block; margin: 0 auto; } footer ul { clear: left; float: left; list-style: none; margin: 0; padding: 0; position: relative; left: 50%; text-align: center; } footer ul li { display: block; float: left; list-style: none; margin: 0; padding: 30px 20px; position: relative; right: 50%; } footer ul li a { color: white; font-size: 20px; text-transform: uppercase; text-decoration: none; font-family: 'Source Sans Pro', sans-serif; } 

 <footer> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">My Story</a></li> <li><a href="#">Listings</a></li> <li><a href="#">Contact Me</a></li> </ul> </nav> </footer> 

Answer 1

You really have a bit too much CSS there...

One important thing for solving your problem is to not use display: inline-block and any float on the same element ( float prevents centering).

If you use display: inline-block on the li items and text-align: center on their container (the ul ), that basically solves the problem.

But I also erased quite a bit of your original CSS which is not necessary - see snippet below.

 footer { height: 300px; background-color: black; margin-top: 50px; } footer ul { list-style: none; margin: 0; padding: 0; text-align: center; } footer ul li { display: inline-block; list-style: none; margin: 0; padding: 30px 20px; } footer ul li a { color: white; font-size: 20px; text-transform: uppercase; text-decoration: none; font-family: 'Source Sans Pro', sans-serif; } 

 <footer> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">My Story</a></li> <li><a href="#">Listings</a></li> <li><a href="#">Contact Me</a></li> </ul> </nav> </footer> 

Answer 2

Use Flex:

footer {
  background-color: black;
}

footer nav {
  height: 300px;
}

footer ul {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  list-style: none;
}

footer ul li {
  padding: 30px 20px;
}

footer ul li a {
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: 'Source Sans Pro', sans-serif;
}