title: margin-left and margin-right for Setting Center position
body: <p>I want to set the center the <code>.user-menu</code> position, but my code below isn't working. How can I solve this?</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;body&gt;
      &lt;div class="user-menu"&gt;
          &lt;div class="menu-items"&gt;
              &lt;div class="bought-tickects centered hover-effect"&gt;&lt;/div&gt;
              &lt;label&gt;تاریخچه خرید&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="menu-items"&gt;
              &lt;div class="profile centered hover-effect"&gt;&lt;/div&gt;
              &lt;label&gt;حساب کاربری&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class=""&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;div class="container-of-selected"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <h3>CSS</h3>
  
  <pre><code>* {
      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;
  }
  </code></pre>