Valdemar_check
Valdemar_check
Explore posts from servers
DIAdiscord.js - Imagine a boo! 👻KPCKevin Powell - Community
PostsComments
KPCKevin Powell - Community
Created by Valdemar_check on 12/24/2023 in #front-end
Margin auto doesn't work as I expected
I am trying to put .left and .right elements evenly within .header-content using margin: 0 auto. When I apply the rule, it doesn't do anything, why? HTML: 
<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>
      <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>
CSS: 
header {
  height: 4rem;
}

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

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

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

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