Margin auto doesn't work as I expected

<header>
      <div class="header-content">
        <div class="left">
          <img src="." alt="Go to main page" class="logo" />
          <button class="header-button">Каталог</button>
          <button class="header-button">Топы</button>
          <button class="header-button search">
            <img src="." alt="Search" />
            <p>Поиск</p>
          </button>
        </div>
        <div class="right">
          <button class="header-button">Закладки</button>
          <button class="header-button black-white-theme"></button>
          <button class="header-button settings">
            <img src="." alt="Press to get to settings" />
          </button>
          <button class="header-button log-in">Войти</button>
        </div>
      </div>
    </header>

header {
  height: 4rem;
}

.header-content {
  margin: 0 auto;
  width: max(1200px);
}

.header-content > * {
  margin: 0 auto;
  display: inline-block;
}