falsedesire, Это margin от h1.
Либо уберите его и задайте padding .intro
Или задайте .intro display:flex
Или погуглите статью про "схлопывание вертикальных margin", есть несколько вариантов решения. Я написала наиболее разумные.
falsedesire, интересно, что мешает сделать песочницу с полным кодом с проблемой.
Давайте еще погадаем. У dream есть верхний margin и он отталкивает родительский блок от body
Блок с фоном и размерами в vw.
Текст абсолютом и размером шрифта в vw.
До некоторого уменьшения этого хватит.
Потом перестраивать во что-нибудь через media.
Алексей Ярков, это и так повторный вопрос.
Но поскольку песочницы там так и появилось, то он остался без ответа.
С этим, по всей видимости, тоже будет такая же история.
то элементы сползают как по ширине так и по высоте, хотя при этом у родительского элемента есть фиксированная ширина и стоит position: relative.
Да где же она фиксированная, если у родителя .left-side'а задан flex. Поэтому он уменьшается.
Т.е. нужно либо запретить ему уменьшаться, тогда получите горизонтальную прокрутку, когда перестанет помещаться.
Либо смещения нужно задавать в %, причем предварительно поняв откуда их считать (обычно от центра, а не от краев), а размеры самих элементов и шрифта переписывать в vw, тогда будет масштабироваться.
Либо комбо этих вариантов и media условия. Это лучший способ, иначе на мобилках все будет уже микроскопическим.
если же смотреть на ноутбуке или на айпаде
Выражайтесь точнее. У ноутбука может быть какое угодно разрешение, да и айпады бывают разные.
Либо уберите его и задайте padding .intro
Или задайте .intro
display:flexИли погуглите статью про "схлопывание вертикальных margin", есть несколько вариантов решения. Я написала наиболее разумные.