написал, так, но работает плохо адаптивно, когда делаю ширину екрана меньше, тогда картинка перекрывает текст. планшет выходит за межи контейнера, я так понял что надо позиционировать абсолютно, я пробовал, но ломает адаптив, когда ширина меньше контейнера, то появляется прокрут,только работает все адаптивно если планшет поставить в контейнер, но на макете по другому, какие стили надо написать чтоб планшет вышел за межи контейнера, и адаптивная картинка была
.container{
width: 100%;
max-width: 1230px;
padding: 0px 15px;
margin: 0 auto;}
.your--browser{
display: flex;
}
.your--browser__ipad--img{
position: absolute;
right: 0;
display: block;
max-width: 100%;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="your--browser">
<div class="your--browser__info">
<h2 class="your--browser__title">All You need is a browser!</h2>
<p class="your--browser__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p class="your--browser__description">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
</p>
<div class="your--browser__marked">
<img src="img/marked.png" alt="marked" class="your--browser__marked-icon">
<div class="your--browser__text">Lorem ipsum dolor sit amet consectetur</div>
</div>
<div class="your--browser__marked">
<img src="img/marked.png" alt="marked" class="your--browser__marked-icon">
<div class="your--browser__text">Ut enim ad minim veniam quis nostrud</div>
</div>
</div>
<div class="your--browser__ipad">
<img class="your--browser__ipad--img" src="http://placehold.it/350x400" alt="">
</div>
</div>
</div>
</body>
</html>