Как сделать так чтобы блок div не расширялся при добавлении элемента?

Question

[Beginner_in_IT]

Всем привет! Пишу свой первый сайт и столкнулся с не большой проблемой. Я сделал меню на Grid и хочу сбоку от него добавить навикон (меню гамбургер), когда добавляю, блок div расширяется хотя все размеры выставлены.
Подскажите что я делаю не так!

Comments

[Ankhena]

Начать, наверное, имеет смысл с разметки.
Меню это тег nav и в нем ul и т.д.
А у вас одинокий li вставлен в div. Так нельзя.
img - это контентные изображения. А у вас иконки, их делают стилями. Но хорошо бы сделать текст для доступности.
Получится:

<a href=""><span class="visually-hidden">Инструменты</span></a>

. Про паттерн visually-hidden погуглите.

блок div расширяется хотя все размеры выставлены

Не вижу ничего про ширину в коде. Это раз.
И два: не вижу по скринам, чтобы блок расширялся.

На этом сервисе запрещено вставлять код скринами. Используйте для него теги <code></code> и/или песочницы типа codepen.io
Лучше и то и другое, а длинные простыни с кодом убирать в спойлеры.

[Beginner_in_IT]

Ankhena, ну как же, на первых двух скринах наглядно показано что блок без 3х палочек уже чем с ними.
Вот ссылка на codepen.io
https://codepen.io/SergeiS/pen/oNyGYGm?editors=1100
Закомментируйте li и блок сузится

[Ankhena]

Beginner_in_IT, если что, скрины я вижу так


Песочницу ага, посмотрю

[Ankhena]

Beginner_in_IT, посмотрела. Там всё та же дикая разметка. Валидатор тут: https://validator.w3.org/nu/
Посмотрите видео Вадима Макеева о том как сверстать навигацию https://www.youtube.com/watch?v=y52rtbUeCac&t=14s

Двигать бургер с помощью relative мало удобно. Ведь место под него останется зарезервированным в том месте, где элемент был до сдвига.
Используйте либо абсолют либо флексы с гридами.

[Beginner_in_IT]

Ankhena, я понимаю у меня так же они отображаются. Как по мне, видно что скрин с тремя палочками больше другого.
В любом случае спасибо за такую быструю реакцию и за советы!

[Ankhena]

Beginner_in_IT, если под "расширяется" вы имели в виду увеличение высоты, то объяснение в комментарии выше.

relative не убирает элемент из потока и его бывшее место остается зарезервированным, оно и увеличивает высоту.