Как вынести блоки сбоку как на макете?

Question

[Alisa]

Нужно блоки с рекламой поставить сверху. Так все выглядит как на макете, по все попытки выставить только ломали блоки с рекламой.

Comments

[Ankhena]

К сведению: jsfiddle не работает на территории России, соответственно, желающих смотреть ваш код через VPN может оказаться не так и много. Так что сейчас разумнее codepen.io

По теме:
Я так понимаю, что есть main и aside и вы хотите поставить их рядом.
Так и где флекс или грид у их родителя?

[Александр]

Здравствуйте. Сразу вопрос. Может и не в тему. Почему не используется бутстрап? У вас только под десктоп версия страницы?

[Alisa]

Александр Здравствуйте. Потому что Bootstrap еще не проходили. Версия только десктоп. Мы и флексы еще не прошли, но блоки с флексами хоть выглядят максимально приближено к макету. Проблема что у меня не выходит поднять их наверх как на макете.

[Alisa]

Ankhena, Здравствуйте. Про jsfiddle не знала, но обязательно учту.
Да хочу поставить aside вверху рядом с main. Я пыталась в родителя писать флекс, но видимо не туда писала и все ломалось.

[Ankhena]

Alisa, в песочнице из вопроса у body нет флекса.
Либо можно поместить блоки в контейнер и задать флекс ему.
Контейнер также будет служить ограничителем ширины особенно на больших экранах

[Talim40k]

Для aside добавьте "overflow: hidden" (если float прописан у main). Для позиционирование при помощи flexbox, display: flex нужно прописывать родителю тегов aside и main, желательно обернуть их в div и прописать ему display: flex (в некоторых версиях браузеров с display: flex у body возникали нежелательные последствия). Задавая размер картинкам, задавайте только одну сторону (width или height), для сохранения их пропорций. Честно говоря, вам много над чем еще нужно поработать ;)