Margin auto doesn't work as I expected
I am trying to put
HTML:
CSS:
.left.left and .right.right elements evenly within .header-content.header-content using margin: 0 automargin: 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;
}
