Почему не работает flex-grow?

Question

[mr jeery]

https://codepen.io/Jeerjmin/pen/NXNBxO

Хочу чтобы при уменьшении ширины экрана логотип перемещался в центре.
Поставил в @media flex-grow больше чем у блока меню, но он не хочет изменять ширину ни при каких обстоятельствах. В чем проблема? Прошу помочь

Answer 1

[Константин Боровик]

так а вы не тому элементу присваиваете этот класс. если в общих чертах, то правильный варинт будет примерно такой:

<header>

<a href="main.html" class="logo">
		<div>
	
					<div class="logotype">
				 			<img src="logo3.jpg" id="logojpg">
					</div>

					<div class="companyname">
						<p>ALEXANDER SHNEYDMILLER </p>
					</div>

		</div>
</a>

		
			<!--МЕНЮ САЙТА -->
			<div class="list-menu">
				<div class="nav-toggle"><span></span></div>
				<ul id="menu">
					<li><a href="main.html#b"> Галерея</a></li>
					<li><a href="#a">Контакты</a></li>
					<li><a href="#a">Обо мне</a></li>
				</ul>
			</div>
</header>

т.е. перемеcтите класс logo на уровень выше и все будет.

Answer 2

[Илья]

Потому что у вас ссылка на логотип является непосредственным флекс-элементом. Поместите эту ссылку внутрь логотипа.