I don't know why this is not aligning in center

May 31, 2023

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 &amp; 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>

>Solution :

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.