I don't know why .pricing-container
is not aligning in centre
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Pricing Table</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sono:wght@400;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Sono', sans-serif; }
.pricing-plan {
display: inline-flex;
gap: 5px;
width: 25%;
padding: 15px;
border-radius: 10px;
flex-direction: column;
background-color: #ededed ;
}
.pricing-container {
align-items: center;
justify-content: center;
}
.plan-title {font-size: x-large;}
.plan-price { font-size: xx-large;}
.plan-button {
display: inline;
background-color: orange;
border-radius: 6px;
height: 30px;
}
ul {list-style-type: none}
</style>
</head>
<body>
<div class="pricing-container">
<div class="pricing-plan">
<div class="plan-title">Basic</div>
<div class="plan-price">$9.99/month</div>
<ul class="plan-features">
<li>✅ 10GB Storage</li>
<li>✅ 1 User</li>
<li>🚫 Support</li>
</ul>
<button class="plan-button">Sign Up</a>
</div>
<div class="pricing-plan">
<div class="plan-title">Standard</div>
<div class="plan-price">$19.99/month</div>
<ul class="plan-features">
<li>✅ 50GB Storage</li>
<li>✅ 5 Users</li>
<li>✅ Phone & Email Support</li>
</ul>
<button class="plan-button">Sign Up</a>
</div>
<div class="pricing-plan">
<div class="plan-title">Premium</div>
<div class="plan-price">$49.99/month</div>
<ul class="plan-features">
<li>✅ 100GB Storage</li>
<li>✅ 10 Users</li>
<li>✅ 24/7 Support</li>
</ul>
<button class="plan-button">Sign Up</a>
</div>
</div>
</body>
</html>
The only properties you've applied to .pricing-container
are align-items
and justify-content
. Both of these only affect Grid and Flex layouts of which .pricing-container
is neither (it has descendants which are part of Grid and Flex layouts, but it isn't part of one itself).
As a result, any property which might effect its position (or the position of its content) is the default for a div
(display: block
, text-align: start
, width: auto
, etc).
Possibly you want to set it to display: flex
but since you are really trying to arrange the grandchildren in a grid you might want to consider replacing all the layout work you've done with a grid layout.
The starting point for that would be to set .pricing-container
to display: grid
and the .pricing-plan
elements to display: content
so you can arrange the .plan-title
etc elements on that grid.