Потому что H5 не может быть в теге P. Ровно как и картинка там быть не должна. H - это заголовок, а P - это параграф (обычный строчный текст).

Браузеры тоже не тупые, вот и пытаются исправить твою семантическую ошибку. Не все теги можно пихать друг в друга. Максимум что ты можешь пихнуть в P - это spanс background-image.

Зачем тебе там вообще P, если у тебя там нет строчного текста...Делаешь просто div

Должно быть так:

<div id="test-answer">
    <h3 id="test-answer-text">Здесь находится какой-то вопрос, который должен адаптивно вписаться в определенные 
    границы</h3>
      <div id="test-answer-price">
        <img src="/assets/coin.png" id="test-answer-price-img" />
          <span>15</span>
      </div>
    </div>

Лучше конечно делать на js и добавлять класс active через нужный промежуток времени. На js это более красиво и эстетично чтоль... Но если надо css, то вот так:

С процентами и временем уж сами.

Это невозможно. Один url - одна страница. Никакого такого приоритета не существует. Это так не работает. Если хочешь разные данные, делай контент под разными "ключами" и выводи его на нужную тебе страницу из БД по своим JS правилам. Или же делай аппку. Но url тут совсем не при чем.

Для твоего движка страница news - это одинаковые страницы. Ты их тупо рядом положить не сможешь, т.к будет конфликт имен. Не может быть 2 страницы с одинаковым url. Попробуй на компе сделай 2 папки с одинаковыми названиями - аааа, то-то

Как я понял, это зависит от того, что было создано раньше

Всё верно. Новое сохранение заменяет старое. А старая страница с таким же названием висит в архиве и никак не откроется ни при каких обстоятельствах, пока её заново не опубликовать.

Тоже страдал от такой штуки. И даже спрашивал как-то на хабре и мы анализировали с топом.
Короче если у картинки есть родитель с каким-то фиксированным рамером - она заполнит его.
Если нет (независимо от того, есть ли выше у предков какой-то фикс размер) - она будет считать эти проценты от самой себя. Т.е если оригинал картинки допустим 2000х1000пх и мы поставим ей width:100% или max-width:100%в стилях - она не будет заполнять 100% доступного места от родителя, а будет показывать 100% от своего оригинального размера. Т.е 2000х1000пх

И даже если у картинки будет обёртка, размер обёртки будет зависеть от размера картинки, а не от того, что ты зада в стилях этой обертке. Поэтому лично я использую обертку как relative, а картинку как absoluteсо значениями WH:100%



Такая вот шляпа.

Поэтому я в любом своём проекте никогда не вставляю картинки без обёртки. Только если у них фикс.размер по макету.

Ещё в качестве примера могу показать своё:


На первый взгляд, тут у родителя нет фикс. размера, однако все картинки адекватно вебя ведут... Но не тут то было. CSS правило aspect-ratio: 1/1; у обертки, делает этой обёртке фикс размер, т.к по итогу браузер пересчитывает это в пиксели)) Стоит его убрать - картинки пойдут по п. Я искал инфу по этому поводу в спецификации и тд., но чет не нашел. Методом тыка напоролся, поборолся, понял что нифига не выйдет с этим сделать и принял так, как оно есть.

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

transitiob: 250ms;

А надо N. И ставить его надо в оба класса, чтобы при уводе мышки, плавность была и назад