Почему мой верхний элемент div не такой широкий, как два других в моем медиа-запросе? ⇐ CSS

[Anonymous]

Я работаю над заданием и не могу найти, где решение отличается от моего кода. В результате один элемент div становится меньше двух других, в то время как решение имеет одинаковую ширину.
Я просмотрел каждую строку в обоих наборах кода несколько раз и не вижу ее. Можете ли вы мне помочь?
Код решения:




Flexbox Pricing Table
[*]



body {
font-family: 'Sono', sans-serif;
}

.pricing-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 2rem;
}

.pricing-plan {
flex: 1;
max-width: 400px;
padding: 20px;
background-color: #f2f2f2;
border-radius: 5px;
text-align: center;
}

.plan-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}

.plan-price {
font-size: 48px;
font-weight: bold;
margin-bottom: 10px;
}

.plan-features {
list-style: none;
padding: 0;
margin: 0;
}

.plan-features li {
margin-bottom: 20px;
}

.plan-button {
padding: 10px;
background-color: #ff6600;
color: #fff;
border-radius: 5px;
border: none;
}

@media (max-width: 1250px) {
.pricing-container {
flex-direction: column;
height: 100%;
}
}






Basic
$11.99/month

• 10GB Storage
• 1 User
• Support

Sign Up


Standard
$19.99/month

• 50GB Storage
• 5 Users
• Phone & Email Support

Sign Up


Premium
$49.99/month

• 100GB Storage
• 10 Users
• 24/7 Support

Sign Up







Мой код:



Flexbox Pricing Table
[*]



body {
font-family: "Sono", sans-serif;

}

.pricing-container {
display: flex;
gap: 30px;
align-items: center;
justify-content: center;
height: 100vh;

}

.pricing-plan {
background-color: lightgray;
text-align: center;
border-radius: 5px;
padding: 20px;
max-width: 400px;
flex: 1;
}

.plan-features {
list-style-type: none;
padding: 0;
margin: 0;
}

.plan-features li {
margin-bottom: 20px;

}

.plan-button {
background-color: rgb(231, 107, 6);
border-radius: 5px;
font-size: 15px;
color: white;
padding: 10px;
border: none;

}

.plan-title {
font-size: 30px;
font-weight: bold;
margin-bottom: 10px;
}

.plan-price {
font-size: 48px;
font-weight: bold;
margin-bottom: 10px;
}

/* Hint: What can you do with a media query and flexbox? */
@media (max-width: 1250px) {
.pricing-container {
flex-direction: column;
height: 100%;
}

}






Basic
$9.99/month

• 10GB Storage
• 1 User
• Support

Sign Up


Standard
$19.99/month

• 50GB Storage
• 5 Users
• Phone & Email Support

Sign Up


Premium
$49.99/month

• 100GB Storage
• 10 Users
• 24/7 Support

Sign Up






Подробнее здесь: https://stackoverflow.com/questions/798 ... edia-query