Warum ist mein oberstes Div-Element nicht so breit wie die anderen beiden in meiner Medienabfrage? ⇐ CSS

[Anonymous]

Ich arbeite an einer Aufgabe und kann nicht feststellen, wo sich die Lösung von meinem Code unterscheidet. Dadurch ist ein Div kleiner als die anderen beiden, während die Lösung alle die gleiche Breite hat.
Ich habe jede Zeile in beiden Codesätzen mehrmals durchgesehen und kann sie nicht sehen. Können Sie mir helfen?
Lösungscode:

Code: Select all

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

Mein Code:

Code: Select all

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