---------
РЕДАКТИРОВАТЬ: Я думаю, что мой ответ в порядке, но это https://stackoverflow.com/a/56487541/10712525 (ответ @showdev) отлично.
---------
Посмотрите результат
Я добавил новый "главный" элемент, чтобы центрировать все в серединеи я разделяю правое и левое содержимое с помощью div.Я изменил некоторые вещи в стилях, добавил новые строки и удалил другие, все прокомментированы.Я надеюсь, что это может помочь вам.
Здесь код:
<html>
<head>
<style>
.button {
background-color: #16D6D1;
padding: .9rem 2rem;
border-radius: 6px;
display: inline-block; /* New line */
}
a {
text-decoration: none;
text-transform: uppercase;
color: inherit;
size: 1.9rem;
font-weight: 700;
}
.eurovan {
width: 100%; /* 100% width, keep it, dont delete or change for "auto" or 35% */
}
.boat {
width: 100%; /* 100% width, keep it, dont delete or change for "auto" or 65% */
/* delete float: right, dont need it*/
}
.feature {
width: 65%;
/* delete background-color: #F6F8FA, dont need it */
/* delete float: right, dont need it */
text-align: center; /* New line */
margin: auto; /* New line */
padding: 50px; /* New line */
}
/* add content to this class */
.left {
display: inline-block;
position: absolute;
width: 65%;
margin: 20px;
}
/* add content to this class */
.right {
display: inline-block;
width: 35%;
margin: 20px;
}
/* add content to this class */
.clearfix {
position: relative;
}
/* New class, only for center the content in the middle */
.main {
max-width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- New main div -->
<main class="main">
<section class="clearfix">
<!-- separate right left content in divs -->
<div class="right">
<img class="eurovan" src="assets/image-1.jpeg" alt="A cyan coloured Eurovan driving on a winding road through the mountains">
</div>
<div class="left">
<img class="boat" src="assets/image-2.jpeg" alt="An overhead shot of a boat coming into shore from the ocean">
<div class="feature">
<h3>Feature</h3>
<h2>lorem ipsum dolor sit amet, consectetur</h2>
<a href="#" class="button">Read More</a>
</div>
</div>
</section>
</main>
</body>
</html>
Для рассмотрения:
Заполнение /атрибуты поля, которые я добавил в классы объектов, левый и правый, предназначены только для дальнейшего разделения элементов.Это не обязательно для вашей цели, но идея стилизации состоит в том, чтобы сделать все красивым, а держать предметы отделенными друг от друга, чтобы все выглядело лучше.То же самое для основного div, вы можете удалить его, если хотите, или изменить ширину с 70% до 80% или 50%.