Jumandjilos

поработай со свойством justify-content

Можно с помощью ::after или ::before добавить, самой кнопке задать position:relative, а псевдоэлементу position:absolute, ну и с помощью свойств left, right, top, botom уже настроить

Css Grid, и проблема решена

если для интернет магазина, то лучше не флексы, а css grid используй

https://www.youtube.com/watch?v=RIKFFcQaOro вот то что тебе нужно, как пример, очень неплохо смотрится

.element:first-child//первый элемент
element:nth-child(4n)//каждый четвертый

Короче, задай изображению max-width: 100%; Оно займёт весь блок, а также будет адаптивным.

на flex даже не знаю, но посоветую использовать css grid, он именно для таких макетов и сделан

задай свойство transition

скинь лучше код из css файла, так легче разобраться в ошибке будет

Точно, сам все время забываю про этот $(this), новичок еще)

font-weight: bold;

можно еще $(this).next().slideToggle(300);

Ну обычно лучше все же делать блок-обертку сайта, далее из header, footer ит.д. конечно можно сделать контейнеры. Кучу блоков делать не нужно, flex гораздо проще, чем float, лучше посмотри пару видео на ютубе, где базово говорят про flex и всё поймешь, так в двух словах объяснил как могу

Вот уж флексам то нет проблем научиться, просто в ютубе вбей уроки flexbox, их там до кучи