I have some divs set up as navigation buttons and I have put all the buttons into a div and then put that div into another "holder" div. the problem is that I can't seem to center the div that holds the buttons.

I've tried to add `margin:0` auto but it doesn't seem to do anything:

HTML:

```
<div class="navholder">

<div class="nav">
<div class="button1"><div class="triangle"></div></div>
<div class="button2"><div class="triangle"></div></div>
<div class="button3"><div class="triangle"></div></div>
<div class="button4"><div class="triangle"></div></div>
<div class="button5"><div class="triangle"></div></div>
<div class="button6"><div class="triangle"></div></div>
</div>

</div>

```

CSS:

```
.navholder {
    width:950px;
    height:350px;
    background-color:grey;

}

.nav {
    position:relative;
    bottom:0px;
    margin:0 auto;
}

.button1, .button2, .button3, .button4, .button5, .button6 {
    width:120px;
    height:35px;
    background-color:rgb(204,204,204);
    margin-left:5px;
    margin-right:5px;
    display:inline-block;
    float:left; 

}

.button1:hover > .triangle, .button2:hover > .triangle, .button3:hover > .triangle, .button4:hover > .triangle, .button5:hover > .triangle, .button6:hover > .triangle{ 
    display: block;
}

.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover{ 
    background-color:#B7939B;
}

.triangle {
    position:relative;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #B7939B;
    top:-15px;
    left:0;
    right:0;
    margin:0 auto;
    display: none;
}

```

Heres a [Fiddle](http://jsfiddle.net/S6BVL/1/) of my code.