Centering navigation bar

Question

I am having trouble centering my navigation bar, I have tried display:inline-block and then align center like most posts suggest but it doesn't seem to be working.

HTML:

<!--Navigation-->
<div class="band navigation">
    <nav class="container primary">
        <div class="sixteen columns">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
    </nav>
</div>

CSS:

nav.primary{
  display: table;
  margin: 0 auto;
}

nav.primary ul, nav.primary ul li {
  margin: 0px;
}

nav.primary select {
  display: none;
  width:  100%;
  height: 28px;
  margin: 21px 0;
}

nav.primary ul li {
  display: inline;
  float: left;
  position: relative;
}

nav.primary ul li a {
  display: inline-block;
  line-height: 49px;
  padding:  0 14px;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 0.08em;
  background: ##999999;
}

nav.primary ul li a:hover {
  background: #2ecc71;
  cursor: pointer;
}

Answer 1

Ok finally got it:

nav.primary ul li {
display: inline;
float: left; <---
position: relative;

Remove the float: left;

Since the navigation is the full width of the containing div, there is no need to mess with floats, the list items will line up with just display: inline;

Answer 2

I tried something else that works... It seems to work better than trying to build in something custom thus far in my experience with Skeleton... Although it produces a bit less pretty markup for the HTML, the rigidity of the final result works for me. Here is my code so that you can see what I did to achieve the desired effect:

<div class="row"> <div class="two columns offset-by-three"> <a href="#" class="nav">Portfolio</a> </div> <div class="two columns"> <a href="#" class="nav">About</a> </div> <div class="two columns"> <a href="#" class="nav">Contact</a> </div> </div>

What you can see here is that the skeleton framework allows for the columns to operate naturally and restack at lower resolutions without any extra code. The only tricky part really is setting up the offset on the left most item.

Answer 3

Have you tried nav.primary ul {text-align: center;} As well as keeping the left/right margins to auto, this worked for me when I was using the skeleton framework.