Not able to centralize the content in website-CodePudding

I am new to website building and using a pre-built website in the below code it is showing the four sections of the pricing and I want to show three sections in total in centralized way but when I hide one pricing all gets aligned to the left side of the webpage.

How should I resolve it ?

Is there anything else need to be shared?

<section id="pricing" >
    <div  data-aos="fade-up">
        <header >
            <h2>Pricing</h2>
            <p>Check our Pricing</p>
        </header>

        <div  data-aos="fade-left">

            <div  data-aos="zoom-in" data-aos-delay="500">
                <div >
                    <h3 style="color: #000000;">Free Plan</h3>
                    <div ><sup>$</sup>0<span> / mo</span></div>
                    <img src="assets/img/pricing-free.png"  alt="">
                    <ul>
                        <li>Aida dere</li>
                        <li>Nec feugiat nisl</li>
                        <li>Nulla at volutpat dola</li>
                        <li >Pharetra massa</li>
                        <li >Massa ultricies mi</li>
                    </ul>
                    <!-- <a href="#" >Buy Now</a> -->
                </div>
            </div>

            <div  data-aos="zoom-in" data-aos-delay="200">
                <div >
                    <span >Featured</span>
                    <h3 style="color: #000000;">Starter Plan</h3>
                    <div ><sup>$</sup>19<span> / mo</span></div>
                    <img src="assets/img/pricing-starter.png"  alt="">
                    <ul>
                        <li>Aida dere</li>
                        <li>Nec feugiat nisl</li>
                        <li>Nulla at volutpat dola</li>
                        <li>Pharetra massa</li>
                        <li >Massa ultricies mi</li>
                    </ul>
                    <a href="#" >Buy Now</a>
                </div>
            </div>

            <div  data-aos="zoom-in" data-aos-delay="300">
                <div >
                    <h3 style="color: #000000;">Business Plan</h3>
                    <div ><sup>$</sup>29<span> / mo</span></div>
                    <img src="assets/img/pricing-business.png"  alt="">
                    <ul>
                        <li>Aida dere</li>
                        <li>Nec feugiat nisl</li>
                        <li>Nulla at volutpat dola</li>
                        <li>Pharetra massa</li>
                        <li>Massa ultricies mi</li>
                    </ul>
                    <a href="#" >Buy Now</a>
                </div>
            </div>

            <div  data-aos="zoom-in" data-aos-delay="400">
                <div >
                    <h3 style="color: #000000;">Ultimate Plan</h3>
                    <div ><sup>$</sup>49<span> / mo</span></div>
                    <img src="assets/img/pricing-ultimate.png"  alt="">
                    <ul>
                        <li>Aida dere</li>
                        <li>Nec feugiat nisl</li>
                        <li>Nulla at volutpat dola</li>
                        <li>Pharetra massa</li>
                        <li>Massa ultricies mi</li>
                    </ul>
                    <!-- <a href="#" >Buy Now</a> -->
                </div>
            </div>
        </div>
    </div>
</section>

CodePudding user response：

You are using bootstrap classes set. col-lg-3 And hide <div> using "Hide" class