Не могу выровнять картинку по горизонтали и вертикали
body {
font-family: 'Be Vietnam Pro', sans-serif;
background-color: #000000;
}
.header-nav {
display: flex;
justify-content: space-between;
font-weight: 600;
font-size: 16px;
line-height: 24px;
}
.header-logo {
margin-left: 120px;
margin-top: 40px;
margin-right: auto;
}
.header-link {
text-decoration: none;
margin-top: 52px;
letter-spacing: 0.01em;
color: #FFFFFF;
padding-right: 48px;
}
.header-btn {
background-color: #EE8313;
text-decoration: none;
margin-right: 134px;
margin-left: 86px;
margin-top: 40px;
padding: 12px 24px;
letter-spacing: 0.01em;
color: #FFFFFF;
}
.world-header {
color: #FFFFFF;
font-weight: 700;
font-size: 52px;
line-height: 64px;
letter-spacing: 0.006em;
max-width: 591px;
margin-top: 167px;
margin-left: 120px;
}
.world-text {
font-weight: 400;
font-size: 17px;
line-height: 28px;
letter-spacing: -0.408px;
color: #FFFFFF;
max-width: 474px;
margin-top: 32px;
margin-left: 120px;
}
.world-btn-buy {
display: inline-block;
padding: 12px 24px;
background-color: #EE8313;
color: #FFFFFF;
text-decoration: none;
margin-left: 120px;
margin-top: 48px;
font-weight: 600;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.01em;
}
.world-btn-video {
font-weight: 600;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.01em;
color: #EE8313;
text-decoration: none;
padding: 12px 24px;
margin-left: 35px;
border: 1px solid #EE8313;
}
.world-bold-500 {
text-transform: uppercase;
font-weight: 700;
font-size: 40px;
line-height: 52px;
letter-spacing: -0.0041em;
color: #FFFFFF;
margin-top: 40px;
margin-left: 120px;
}
.world-info-luxury {
font-weight: 600;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.01em;
color: #FFFFFF;
margin-top: 61px;
margin-left: 16px;
}
.world-block-luxury {
display: flex;
}
.world-bold-1 {
text-transform: uppercase;
font-weight: 700;
font-size: 40px;
line-height: 52px;
letter-spacing: -0.0041em;
color: #FFFFFF;
margin-top: 40px;
margin-left: 40px;
}
.world-info-best {
font-weight: 600;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.01em;
color: #FFFFFF;
margin-top: 61px;
margin-left: 16px;
}<header class="header">
<nav class="header-nav">
<img src="img/lgo.svg" alt="logo" class="header-logo">
<a href="#" class="header-link">Home</a>
<a href="#" class="header-link">Cars</a>
<a href="#" class="header-link">Book now</a>
<a href="#" class="header-link">Terms and Conditions</a>
<a href="#" class="header-btn">Manage Booking</a>
</nav>
</header>
<main class="main">
<section class="world">
<h1 class="world-header">The World's Best Luxury Car Deals</h1>
<p class="world-text">HKinvestor can provide rentals of the most exclusive cars like Ferrari and Lamborghini.</p>
<a href="#" class="world-btn-buy">Buy Now</a>
<a href="#" class="world-btn-video">Video Introduction</a>
<div class="world-block-luxury">
<b class="world-bold-500">500+</b>
<p class="world-info-luxury">Luxury Cars</p>
<b class="world-bold-1">#1</b>
<p class="world-info-best">Best Deal Car</p>
<img src="img/world-img.png" alt="" class="world-img">
</div>
</section>Как выглядит у меня
Как должно быть
Вообще на Youtube есть видео по этому макету, но там сделано через абсолютное позиционирование, а адаптив в ролике не делается, я хочу сделать адаптив, но не знаю можно ли потом будет сделать адаптив при абсолютном позиционировании, ещё перепробовал кучу других способов, по горизонтали вытаскивал картинку из блока и выровнял через флоат по правому краю , а по вертикали так и не сдвинул никаким способом.
Источник: Stack Overflow на русском