when I try to scale down the screen the button is slowly moving out of the container and it should stay in a fixed position at the bottom even tho the screen is smaller.
css
:root {
--color1: hsl(31, 77%, 52%);
--color2: hsl(184, 100%, 22%);
--color3: hsl(179, 100%, 13%);
--paragraphWhite: hsla(0, 0%, 100%, 0.75);
--headingsWhite: hsl(0, 0%, 95%);
--fontParagraph: "Lexend Deca", sans-serif;
--fontDisplay: "Big Shoulders Display", sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 15px;
font-family: var(--fontParagraph);
background-color: var(--headingsWhite);
color: var(--paragraphWhite);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
max-width: 1020px;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border-radius: 0.5em;
margin: 2em;
overflow: hidden;
height: 450px;
max-width: 1020px;
}
.sedan,
.suv,
.luxury {
padding: 12% 15% 12% 15%;
}
.icon {
padding-bottom: 20px;
}
.title {
font-family: var(--fontDisplay);
color: var(--headingsWhite);
font-weight: 700;
padding-bottom: 20px;
}
.text {
line-height: 1.6;
font-size: 16px;
}
.btnBox {
padding-top: 80px;
position: fixed;
}
.button {
border: none;
width: 120px;
height: 35px;
border-radius: 1em;
}
.sedan .button {
color: var(--color1);
}
.suv .button {
color: var(--color2);
}
.luxury .button {
color: var(--color3);
}
.sedan {
background-color: var(--color1);
}
.suv {
background-color: var(--color2);
}
.luxury {
background-color: var(--color3);
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
HTML
<main>
<div class="wrapper">
<div class="sedan">
<img src="/images/icon-sedans.svg" alt="sedan" class="icon" />
<h1 class="title">Sedans</h1>
<p class="text">
Choose a sedan for its affordability and excellent fuel economy.
Ideal for cruising in the city or on your next road trip.
</p>
<div class="btnBox">
<button class="button">Learn More</button>
</div>
</div>
<div class="suv">
<img src="/images/icon-suvs.svg" alt="" class="icon" />
<h1 class="title">SUVs</h1>
<p class="text">
Take an SUV for its spacious interior, power, and versatility.
Perfect for your next family vacation and off-road adventures.
</p>
<div class="btnBox"><button class="button">Learn More</button></div>
</div>
<div class="luxury">
<img src="/images/icon-luxury.svg" alt="" class="icon">
<h1 class="title">Luxury</h1>
<p class="text">
Cruise in the best car brands without the bloated prices. Enjoy the
enhanced comfort of a luxury rental and arrive in style.
</p>
<div class="btnBox"><button class="button">Learn More</button></div>
</div>
</div>
</main>
<footer>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="#">Your Name Here</a>.
</div>
</footer>
What I have tried:
I tried first to display flex all the div inside the wrapper but the content inside got bigger. also, I tried to position fixed on the button box still it doesn't work