Question

Everytime when I open html, menu position and size is different. Could you help me to fix it? It is supposed to be at the center. Thanks for any help.

div.menu { 
    list-style:none; 
    margin:0; 
    padding:0; 
    width:100%;
    text-align:center;} 
div.menu ul{ 
    font-family: Verdana; 
    font-size:14px; 
    margin:20px; 
    padding:0;
    display:inline-block;} 
div.menu li{ 
    display:inline; } 
div.menu li a{ 
    text-decoration:none; 
    padding:5px 0; 
    width:100px; 
    background:#FBB117; 
    color:#4C4646; 
    float:left; 
    text-align:center; 
    border-left:1px solid #fff; }  
div.menu li a:hover{ 
    background:#a2b3a1; 
    color:#000 } 

Answer 1

You can centre an element by using the margin tag. For this work to though, you’ll have to declare the width of div.menu ul otherwise it’ll inherit the width of it’s parent element, div.menu. Therefore:

div.menu ul{ 
    font-family: Verdana; 
    font-size:14px; 
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100px; <!-- SPECIFY WIDTH -->
}