Dima Polos

Ширина блока от родителя, все верно. Если даете для body ширину, то: https://codepen.io/dimovich85/pen/XWXJvPy
Ширина явно разная. Вы на глаз 100 и 80 пикселей не различили.
Давайте логически: ширина 100 процентов, но не больше 30 процентов?
Дайте мне полный стакан воды, но наполовину полный. Это если Вы оптимист;)
Конечно в процентах разницы не будет.
И еще - у width и max-width разные приоритеты, почитайте, и думаю все на полочки ляжет.
PS: удобно написать модалке width: 100%; max-width: 600px, ведь на мобилках модалка на весь экран, а на десктопе - как на макете, всего 600, так что полезные сочетания свойств;)

Попробуйте класс)

Ищите и читайте flexbox)

Псевдоэлемент + ордер, как вариант - подробности в комментах под вопросом)

margin-left: 100px;

before/after позволяет не засорять разметку ненужными тегами, для оформления можно использовать стили, а они как раз отвечают за оформление. К тому же, добавить иконку или какой-то декоративный текст (например лейбу "Скидка -50%") можно через псевдоэлемент и класс в разметке, так что остается только для товара с распродажи добавить класс, и через js такой класс удобно добавить, а не createElement/appendChild.. span вставлять.