Почему не работает max-width?

209

10 апреля 2019, 23:00

Помогите, пожалуйста, понять, почему не работает свойство max-width: 1650px; для блока с классом "header-wrapper".

Я написал: max-width: 82.1% и всё заработало. Страница выглядит теперь так, как мне было и нужно:

Правда, когда сжимаешь страницу, то из зелёного блока header-wrapper почему-то "выпадает" меню:

Где-то я накосячил. Но не пойму где.

*{ 
	padding: 0; 
	margin: 0; 
} 
 
.clearfix:after { 
    clear: both; 
    content: ""; 
    display: table; 
} 
 
html{ 
	background: #03050b; 
} 
 
 
header{ 
	background: red; 
} 
 
.header-wrapper{ 
	background: green; 
	max-width: 1650px; 
	margin: 0 auto; 
	display: flex; 
 
} 
 
.header-wrapper img{ 
	width: 238px; 
 
} 
 
.menu{ 
	display: flex; 
	list-style: none; 
} 
 
.menu li{ 
	padding-left: 50px; 
 
}

<!DOCTYPE html> 
<html> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Merkury Landing Page</title> 
		<link rel="stylesheet" href="style.css"> 
	</head> 
	<body> 
		<header> 
			<div class="header-wrapper"> 
				<img src="Images/Logo.png" alt="Логотип"> 
				<nav> 
					<ul class="menu"> 
						<li><a href="#" class="item">Features</a></li> 
						<li><a href="#" class="item">Pricing</a></li> 
						<li><a href="#" class="item">Blog</a></li> 
						<li><a href="#" class="item">Contact</a></li> 
						<li><div class="menu-item-btn"> 
							<a href="#">Login</a> 
						</div></li> 
					</ul>					 
				</nav> 
			</div> 
		</header> 
	</body> 
</html>

Answer 1

Меню выпадает, так как элемент logo и li имеют фиксированный размер, в последнем случае - фиксированный отступ. В чем собственно проблема? Свойство max-width: 1650px работает как положено.