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

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

Post by 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




Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post