margin-left and margin-right for Setting Center position

css, html

Solution

Give the `.user-menu` a width, currently it is a block element so it will fill its container. This causes the `user-menu` to expand to 100% width across the page, which technically is centered, you just don't notice it.

.user-menu {
    margin-left:auto;
    margin-right:auto;
    width: 100px;
}

Problem

I want to set the center the `.user-menu` position, but my code below isn't working. How can I solve this? HTML ``` <body> <div class="user-menu"> <div class="menu-items"> <div class="bought-tickects centered hover-effect"></div> <label>تاریخچه خرید</label> </div> <div class="menu-items"> <div class="profile centered hover-effect"></div> <label>حساب کاربری</label> </div> <div class=""></div> </div> <div class="clear"></div> <div class="container-of-selected"> </div> </body> ``` CSS ``` * { margin: 0px; padding: 0px; font-family: Tahoma; } .centered { margin-left: auto; margin-right: auto; } .menu-items { float: left; height: 90px; margin-left: 10px; margin-right: 10px; } .profile { width: 72px; height: 72px; padding-left: 10px; padding-right: 10px; background-repeat: no-repeat; background-position: center; background-image: url('Images/folder-contacts-icon.png'); border-radius: 5px; } .bought-tickects { width: 72px; height: 72px; padding-left: 10px; padding-right: 10px; background-repeat: no-repeat; background-position: center; background-image: url('Images/tickets-icon.png'); border-radius: 5px; } .clear { clear:both; } .user-menu { margin-left:auto; margin-right:auto; } ```

Original source