title: Aligning header menu in the center
body: <p>I am having some problems with centrally aligning the whole menu container marked with yellow color in the <a href="https://prnt.sc/rgf1d2" rel="nofollow noreferrer">screenshot</a>.</p>
  
  <p><code>"margin: auto"</code> just does not work for some reason which I don't yet understand. The menu container still floats in the left.</p>
  
  <p>I will much appreciate your help.</p>
  
  <p>Please see the full markup and CSS below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0px;
  }
  
  .header-container {
    width: 100%;
    background-image: linear-gradient(to bottom, #008686, #024848);
  }
  
  .brand-logo {
    height: 60px;
    margin-left: 2%;
    margin-right: 3%;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  
  .menu-container {
    width: fit-content;
    border: 3px solid yellow;
    margin: auto;
  }
  
  .brand-logo,
  .menu-container {
    display: inline-block;
    vertical-align: middle;
  }
  
  .menu-item {
    padding: 5px 0px;
    margin-left: 30px;
  }
  
  .menu-item:hover {
    border-bottom: 3px solid #f8f143;
    border-radius: 2px;
    padding-bottom: 10px;
    transition: 0.1s;
  }
  
  .menu-icon {
    height: 40px;
    cursor: pointer;
    border: 1px solid red;
  }
  
  .menu-name-container {
    border: 1px solid red;
    margin-left: 5px;
    text-align: center;
  }
  
  .menu-name {
    font-family: Wendy One;
    font-size: 17px;
    color: #f8f143;
    text-decoration: none;
  }
  
  .menu-icon,
  .menu-name-container {
    display: inline-block;
    vertical-align: middle;
  }
  
  .brand-logo,
  .menu-item {
    display: inline-block;
    vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header class="header-container"&gt;
  
      &lt;a href=""&gt;&lt;img src="buff.png" class="brand-logo"&gt;&lt;/img&gt;&lt;/a&gt;
  
      &lt;div class="menu-container"&gt;
          &lt;div class="menu-item"&gt;
              &lt;img src="android.png" class="menu-icon"&gt;&lt;/img&gt;
              &lt;div class="menu-name-container" style="width: 125px"&gt;
                  &lt;a href="" class="menu-name"&gt;Sports Betting Guides&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="menu-item"&gt;
              &lt;img src="android.png" class="menu-icon"&gt;&lt;/img&gt;
              &lt;div class="menu-name-container" style="width: 110px"&gt;
                  &lt;a href="" class="menu-name"&gt;Horse Racing Guides&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="menu-item"&gt;
              &lt;img src="android.png" class="menu-icon"&gt;&lt;/img&gt;
              &lt;div class="menu-name-container" style="width: 55px"&gt;
                  &lt;a href="" class="menu-name"&gt;Casino Guides&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="menu-item"&gt;
              &lt;img src="android.png" class="menu-icon"&gt;&lt;/img&gt;
              &lt;div class="menu-name-container" style="width: 60px"&gt;
                  &lt;a href="" class="menu-name"&gt;Betting Tools&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="menu-item"&gt;
              &lt;img src="android.png" class="menu-icon"&gt;&lt;/img&gt;
              &lt;div class="menu-name-container" style="width: 80px"&gt;
                  &lt;a href="" class="menu-name"&gt;Betting Strategies&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="menu-item"&gt;
              &lt;img src="android.png" class="menu-icon"&gt;&lt;/img&gt;
              &lt;div class="menu-name-container" style="width: 60px"&gt;
                  &lt;a href="" class="menu-name"&gt;Betting Tips&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="menu-item"&gt;
              &lt;img src="android.png" class="menu-icon"&gt;&lt;/img&gt;
              &lt;div class="menu-name-container" style="width: 55px"&gt;
                  &lt;a href="" class="menu-name"&gt;News Corner&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>