Question

Hello I am having trouble centering a div, with margin:0 auto; I have my HTML structured like this,

<div class="wrapper">  
    <div class="content">  
        <nav class="mini">  
            <!-- nav class mini content -->
        </nav>   
    </div>  
</div>

The CSS looks like this,

    .wrapper {  
        width:1154px;
        margin:0 auto;
    }

.content {  
     width:906px;  
     margin:0 auto;  
     text-align:center;
}

.mini {
   width: 350px;  
   margin:0 auto;
}

I would expect .mini to be centered within .content but it is not what am I doing wrong?

Answer 1

All your div are centered. The only problem is your li’s are floated left. So make your ul center & it will look good.

.mini ul {display:inline-block;}

fiddle demo: http://jsfiddle.net/surendraVsingh/pYbAP/7/