Например, можно убрать ширину у списка и задать overflow: hidden;
img{
float:left;
width:300px;
}
ul{
list-style: none;
overflow: hidden;
}
ul li{
border-left: 4px solid black;
}
<img src="https://avatanplus.com/files/resources/original/56aec6c2848cf1529ab867ef.png" alt="">
<ul>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
</ul>
Или обернуть все содержимое (а обернуть все необходимо т.к. присутствует плавающий элемент) и задать списку тоже float
:
img{
float:left;
width:300px;
}
ul{
list-style: none;
width: 700px;
float: left;
}
ul li{
border-left: 4px solid black;
}
.wrap {
width: 1000px;
overflow: hidden;
}
* { box-sizing: border-box; }
<div class="wrap">
<img src="https://avatanplus.com/files/resources/original/56aec6c2848cf1529ab867ef.png" alt="">
<ul>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
</ul>
</div>
Вариант с flex
и оберткой:
img{
float:left;
width:300px;
}
ul{
list-style: none;
width: 700px;
}
ul li{
border-left: 4px solid black;
}
.wrap {
display: flex;
align-items: flex-start;
}
* { box-sizing: border-box; }
<div class="wrap">
<img src="https://avatanplus.com/files/resources/original/56aec6c2848cf1529ab867ef.png" alt="">
<ul>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
<li>
<h3>-Как поднятся в топ?</h3>
<p>Что бы подняться в ТОП нужно бла бла бла. А лучше обратиться к нам! Заполните заявку сейс и получите скидку 10% на первое бла бла бла. Мы поможем вам улучшить производительность и настроим бла бла бла </p>
</li>
</ul>
</div>