Что не так с вёрсткой кнопок?

Question

[NATASHA_PULIMET]

Проблема в том, что при любом изменении ширины экрана, будь то уменьшение или увеличение, кнопки смещаются. Я понимаю, что так должно быть, но они смещаются буквально каждый пиксель. Я убирал все внешние/внутренние отступы, убирал всю структуру кроме кнопок, задавал ширину контейнеру, создавал отдельный контейнер, куда закидывал nav, ему задавал ширину Они всё равно едут при малейшем изменение экрана. Можете подсказать, что не так?
https://codepen.io/ThunderCat-aka-Snark/pen/bNGdbNe

Comments

[smilingcheater]

Вы бы хоть песочницу оформили. Думаете кто-то будет копировать себе и запускать ваш код чтобы понять что у вас не та?

[NATASHA_PULIMET]

у меня подключен reset файл, поэтому я не обнуляю некоторые стили в css. В частности стили списка.

[ThunderCat]

NATASHA_PULIMET, Так и как это все проверить?
При таких данных совет один - заходишь в свойства элемента и смотришь какие стили мешают. Скорее всего где-то выше по дереву прописана ширина 100% или авто, соответственно при каждом сдвиге будет пересчет и сдвиг кнопок.

[Ankhena]

NATASHA_PULIMET,

у меня подключен reset файл, поэтому я не обнуляю некоторые стили в css. В частности стили списка.

Отлично. Кроме того, что reset устарел очень давно, ещё до того, как устарел классический normalize.
Теперь вместе со всем, что касается вопроса, нужно сделать песочницу с видимой проблемой.

Пока делаете песочницу, имеет смысл переверстать всё на флексы с gap. Потому что вот это .switch__filter li+li ещё как-то можно было оправдать 10 лет назад (и то с трудом).

А вопрос отредактировать без необходимости использования ##. Иначе у него есть большой шанс быть удаленным.
Также указать, что значит "едут при малейшем изменение экрана". При том коде, который вы показали, они могут только переноситься на следующую строку и выстраиваться в соответствии с отступами, которые вы задали.

[NATASHA_PULIMET]

smilingcheater, Подскажите, что надо сделать? Как это оформить песочницу?

Answer 1

[ThunderCat]

https://codepen.io/ThunderCat-aka-Snark/pen/bNGdbNe
При вышеописанных условиях ничего не двигается. Косяк где-то выше по дереву, или какие-то стили перебиваются, что легко можно глянуть в инспекторе стилей.

Comments

[NATASHA_PULIMET]

Я может не понимаю, что-то, но я зашёл в инструменты разработчика. Сужаю/расширяю экран и кнопки едут. Вот пример как хотелось бы. (div "content top")https://live.verstaem.online/house/
там кнопки не двигаются вправо до 1140px, а у меня они смещаются после каждого пикселя. Я не спорю, что я плохой верстальщик и не понимаю очевидный вещей, да и в примере другая ситуация, но я поэтому и задал вопрос, чтоб мне подсказали.

Answer 2

[MrCra]

там в примере по ссылке и в вашем случае кнопки ведут себя так как и должны вести себя. Если нужно какое-то другое поведение нужно использовать медиа запросы

Answer 3

[Al T.]

Какая-то дичь с padding и margin, на лицо полное непонимание, что вы делаете, советую выучите flexbox и будет вам счастье.
Например, можете это сделать здесь в игровой форме (новички в восторге).