I'm having difficulties with my website layout when trying to display text on the left side and images on the right using flexbox. Can anyone help me troubleshoot why it's not working?
.presentation {
display: flex;
width: 90%;
margin: auto;
min-height: 80vh;
align-items: center;
}
.introduction {
flex: 1;
}
.cover img {
height: 60vh;
}<main>
<section class="presentation">
<div class="introduction">
<!--intro text..., -->
<div class="intro-text">
<h1>mac</h1>
<p>This is the latest laptop and this laptop is the best ever until nobody doubt that want to mac. This is very powerfull, strong and almost 8k</p>
</div>
<!--button ...,-->
<div class="cta">
<button class="cta-select">14-inch</button>
<button class="cta-add">Add Cart</button>
</div>
<!-- and images of laptop -->
<div class="cover">
<img src="https://bhrigu.me/images/mac.png" alt="laptop mac">
</div>
</div>
</section>
</main>