Как применить обтекаемость в лендинге
https://disk.yandex.ru/d/7g4qyXzmFB1YMQ
Делала за преподавателем шаг за шагом, но во врезке текст и картинка не становятся в 2 колонки, как в курсе. И сама врезка из картинки встала криво, сверху осталась белая полоса. Прикладываю ссылку на скрин и свой код и стили.
.clear {
clear: both;
}
body {
background-color: #34495e;
color: #c8c8c8;
font-family: 'Roboto', sans-serif;
font-weight: 300;
line-height: 28px;
margin: 0;
padding: 0;
}
header {
background: url(most.jpg) 50% 0 no-repeat fixed;
background-size: cover;
color: white;
}
.wrapper {
max-width: 1170px;
margin: 0 auto;
}
header.wrapper {
padding: 100px 15px 50px 50px;
}
#hеader-left {
float: left;
width: 60%;
}
#header-right {
float: left;
width: 40%;
}
#header-shadow {
background: rgba(0,0,0,0.5);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Простой лендинг</title>
<link rel="stylesheet" href="lending.css">
</head>
<body>
<div id="mainbox">
<header>
<div id="header-shadow">
<div class="wrapper">
<div id="header-left">
<h1>Текст-рыба на русском языке</h1>
<h2>Текст Текст Текст</h2>
<p>Рыбатекст используется дизайнерами, проектировщиками и фронтендерами, когда нужно быстро заполнить макеты или прототипы содержимым. Это тестовый контент, который не должен нести никакого смысла, лишь показать наличие самого текста или продемонстрировать типографику в деле.</p>
<a href="#">Скачать</a>
</div>
<div id="header-right">
<img src="smartphone-1165131_960_720.png">
</div>
<div class="clear"></div>
</div>
</div>
</header>
</div>
</body>
</html>
