Выравнивание меню заголовка в центре

Question

У меня возникли некоторые проблемы с центральным выравниванием всего контейнера меню, отмеченного желтым цветом на скриншоте .

"margin: auto", просто не работает по какой-то причине, чего я не делаю все же понимаю. Контейнер меню все еще плавает слева.

Я буду очень признателен за вашу помощь.

Пожалуйста, ознакомьтесь с полной разметкой и CSS ниже:

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;
}

<header class="header-container">

    <a href=""><img src="buff.png" class="brand-logo"></img></a>

    <div class="menu-container">
        <div class="menu-item">
            <img src="android.png" class="menu-icon"></img>
            <div class="menu-name-container" style="width: 125px">
                <a href="" class="menu-name">Sports Betting Guides</a>
            </div>
        </div>


        <div class="menu-item">
            <img src="android.png" class="menu-icon"></img>
            <div class="menu-name-container" style="width: 110px">
                <a href="" class="menu-name">Horse Racing Guides</a>
            </div>
        </div>


        <div class="menu-item">
            <img src="android.png" class="menu-icon"></img>
            <div class="menu-name-container" style="width: 55px">
                <a href="" class="menu-name">Casino Guides</a>
            </div>
        </div>


        <div class="menu-item">
            <img src="android.png" class="menu-icon"></img>
            <div class="menu-name-container" style="width: 60px">
                <a href="" class="menu-name">Betting Tools</a>
            </div>
        </div>


        <div class="menu-item">
            <img src="android.png" class="menu-icon"></img>
            <div class="menu-name-container" style="width: 80px">
                <a href="" class="menu-name">Betting Strategies</a>
            </div>
        </div>


        <div class="menu-item">
            <img src="android.png" class="menu-icon"></img>
            <div class="menu-name-container" style="width: 60px">
                <a href="" class="menu-name">Betting Tips</a>
            </div>
        </div>

        <div class="menu-item">
            <img src="android.png" class="menu-icon"></img>
            <div class="menu-name-container" style="width: 55px">
                <a href="" class="menu-name">News Corner</a>
            </div>
        </div>
    </div>
</header>

Answer 1

@ Энди, я сделал sone edit в предложенном вами коде, и это сработало, пожалуйста, посмотрите его ниже:

.header-container{
    width: 100%;
    background-image: linear-gradient(to bottom, #008686, #024848);
    position: relative;
    box-sizing: border-box;
}

.brand-logo{
    height: 60px;
    margin-left: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.menu-container{
    width: fit-content;
    border: 3px solid yellow;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 0);
}

Большое спасибо за вашу помощь, вы дали мне идею, которую я не знал :)

Но теперь, когда я нахожу элемент меню, тот, который я нахожу, остается в том же положении, остальные go уменьшаются на 10 пикселей. Я бы хотел, чтобы элемент hoverable был на go вверх, а другие оставались в том же положении.

Пожалуйста, смотрите код:

.header-container{
    width: 100%;
    background-image: linear-gradient(to bottom, #008686, #024848);
    position: relative;
    box-sizing: border-box;
}

.brand-logo{
    height: 60px;
    margin-left: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.menu-container{
    width: fit-content;
    border: 3px solid yellow;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 0);
}

.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;
}

Answer 2

Обновление

Чтобы выровнять меню по центру строки вся , независимо от ширины lo go, вам необходимо установить его абсолютно с .menu-container как относительный контейнер.

.header-container {
  …
  position: relative;
}

.menu-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}