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

[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
[list]
✅ 10GB Storage
[*]✅ 1 User
[*]🚫 Support
[/list]
Sign Up


Standard
$19.99/month
[list]
[*]✅ 50GB Storage
[*]✅ 5 Users
[*]✅ Phone &  Email Support
[/list]
Sign Up


Premium
$49.99/month
[list]
[*]✅ 100GB Storage
[*]✅ 10 Users
[*]✅ 24/7 Support
[/list]
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
[list]
✅ 10GB Storage
[*]✅ 1 User
[*]🚫 Support
[/list]
Sign Up


Standard
$19.99/month
[list]
[*]✅ 50GB Storage
[*]✅ 5 Users
[*]✅ Phone & Email Support
[/list]
Sign Up


Premium
$49.99/month
[list]
[*]✅ 100GB Storage
[*]✅ 10 Users
[*]✅ 24/7 Support
[/list]
Sign Up

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