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

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


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

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

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

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

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

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

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

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

Почему флекс срабатывает на второй тег(а), если я поставил .unn>a, для первого, что с этим делать?

Антон Вебсайтовский,

ну на эту разметку как бы пофиг, есть ошибка или нет, тем более такого рода, это же фигня.

Браузер вынимает ссылку из ссылки. Поэтому обе оказываются на первом уровне div > a

Почему флекс срабатывает на второй тег(а), если я поставил .unn>a, для первого, что с этим делать?

Антон Вебсайтовский, значит, кого-то из них нужно делать вторым слоем.
При текущей разметке будет выходить лажа.
Ни ссылки ни кнопки нельзя вкладывать в ссылки.

Какие есть способы горизонтально выровнять по центру grid элементы?

system-shock, js так может.
В том числе, передавать значения в кастомные.

Почему флекс срабатывает на второй тег(а), если я поставил .unn>a, для первого, что с этим делать?

Антон Вебсайтовский, эм.. это.. ссылки нельзя вкладывать в ссылки.
Можно открыть инспектор и посмотреть по дереву где он их нарисует.
Если что, в разных браузерах результат может быть разный. Как и обычно бывает с невалидным кодом.

Почему флекс срабатывает на второй тег(а), если я поставил .unn>a, для первого, что с этим делать?

Первый это :first-child
> - это первый уровень вложенности

Почему между картинками появляется отступы?

StepsOnes, так откройте ваши картинки в любом редакторе и обрежьте нормально.

Почему между картинками появляется отступы?

Те, которые нарисованы у вас прямо в картинке?

Насколько правильно сбрасывать стили блока через all:unset?

Spaceoddity,

Вы css-правила для одного элемента раскидываете по разным селекторам - это нерациональный подход.

В большом проекте вряд ли получится обойтись одним селектором для каждого элемента. Даже если без переопределений (не верю).

Насколько правильно сбрасывать стили блока через all:unset?

godsplane, лично мне проще контролируемо переопределить фон, рамки, отступы, шрифт и что там ещё нужно по макету,
чем сначала всё сбросить, потом снова задать фон, рамки, отступы и шрифт, а потом ещё вернуть на место то, что сбросилось лишнее. Вроде того же display, appearance, браузерного focus-visible и т.д.
Ну ладно, ff inherit не нужно будет писать, если он по макету inherit.

Не вижу выигрыша от игры в all unset ни для себя ни для браузера. Впрочем, я их не видела и от ресета с нормалайзом (в его первозданном виде от Николаса Галлахера).

Можно ли сделать одинаковую высоту двух строк в разных флексовых блоках?

Поддержу Кофемана :)
Если внутри табличные данные, то в большинстве случаев верстка <table> справляется с задачей.

А по вопросу: нет, флексы так не могут.

Так смогут сабгриды (в некоторых браузерах уже могут) и всегда мог JS.

Как сделать обтекаемость снизу картинки нужного предложения как на скриншоте?

А если текста меньше, чем высота картинки?

Как позиционировать HTML таблицы?

vrpk34, Тогда в одну ячейку и что-нибудь типа float left картинке.
И минимальную ширину заголовку и тексту.

Как перестанет влезать, так перенесется вниз.

Но я не гуру в письмах.

Насколько правильно сбрасывать стили блока через all:unset?

Я могу написать padding:0;margin:0;, но можно же просто написать all:unset.

Можете.
Если вам кроме отступов, нужно сбросить и все остальное, например, получить и display inline, appearance none и т.д., то почему бы и нет.

Но обычно так не нужно.

Как выполнить условие при определенном ответе alert?

Вроде логичнее писать не if алерт, а там же где алерт получает это значение.
Т.е. по каким-то условиям алерт получает такое-то значение и еще должны выполнится ваши новые действия.

Как избавиться от отступов справа?

Сергей К, есть text-align justify.
Ещё есть js.

Как позиционировать HTML таблицы?

Начать нужно с того, что таблицами верстаются только табличные данные.
Т.е. разметка должна быть какой-то такой:

<section class="">
               <a href="#"><img src="https://i.ibb.co/KWqbcvP/Screenshot-2.png" ></a>

               <h2 class="h2-cp">Lorem ipsum dolor sit.</h2>

               <p class="text-cp">
                 Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
                 Cum, molestias quae? Libero itaque aperiam dicta 
                 veritatis quo nostrum facilis expedita!
               </p>
</section>

Ну и всё, дальше гридами или флексами и с помощью order поменять порядок элементов.

Какие есть способы горизонтально выровнять по центру grid элементы?

Через комбинацию nth-child и nth-last-child задаете ячейкам span 2 и отступ или размер.

https://css-live.ru/articles/resheno-s-pomoshhyu-c...

https://jsfiddle.net/Ankhena/q3s9jdmb/

Как сделать анимацию смены картинки которая при которая старая падает в низ а новая выпадает сверху?

Для этого нужно два тега img. Ну или хотя бы пседоэлемент от обертки картинки.
Дальше пишете им @keyframes по желанию.

Подозреваю по "галерея изображений" можно нагуглить несколько десятков вариаций.