How to leave the 4 in a row alone?

A row in Bootstrap is worth 12

If you want 4 column, your col-md-4 pl-2 should be col-md-3 pl-2 because you have 4 elements summing the col-md-4 of 16, which results in two rows row 1 = 12 and row 2 = 4

<div class="container py-4">
    <div class="row">
        <div class="col-md-10 my-4 mx-auto">
            <h2 class="text-center display-4">Bootstrap 4 Pricing Tables</h2>

            <hr>
            <div class="row no-gutters my-3">
                <div class="col-md-3 pl-2">
                    <div class="list-group text-center my-3">
                        <div href="#" class="list-group-item text-white bg-dark">
                            <h4 class="text-center my-1">Managed</h4>
                        </div>
                        <div class="list-group-item text-uppercase font-weight-bold">
                            Contact Us
                        </div>
                        <a href="#" class="list-group-item">
                            Upto 10 TB HDD Storage
                        </a>
                        <a href="#" class="list-group-item">
                            Consultation
                        </a>
                        <a href="#" class="list-group-item">
                            Custom Servers
                        </a>
                        <a href="#" class="list-group-item">
                            24/7 Support
                        </a>
                        <div class="list-group-item">
                            <button class="btn btn-secondary btn-lg btn-block text-truncate">Contact Us</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 pl-2">
                    <div class="list-group text-center my-3">
                        <div href="#" class="list-group-item text-white bg-dark">
                            <h4 class="text-center my-1">Managed</h4>
                        </div>
                        <div class="list-group-item text-uppercase font-weight-bold">
                            Contact Us
                        </div>
                        <a href="#" class="list-group-item">
                            Upto 10 TB HDD Storage
                        </a>
                        <a href="#" class="list-group-item">
                            Consultation
                        </a>
                        <a href="#" class="list-group-item">
                            Custom Servers
                        </a>
                        <a href="#" class="list-group-item">
                            24/7 Support
                        </a>
                        <div class="list-group-item">
                            <button class="btn btn-secondary btn-lg btn-block text-truncate">Contact Us</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 pl-2">
                    <div class="list-group text-center my-3">
                        <div href="#" class="list-group-item text-white bg-dark">
                            <h4 class="text-center my-1">Managed</h4>
                        </div>
                        <div class="list-group-item text-uppercase font-weight-bold">
                            Contact Us
                        </div>
                        <a href="#" class="list-group-item">
                            Upto 10 TB HDD Storage
                        </a>
                        <a href="#" class="list-group-item">
                            Consultation
                        </a>
                        <a href="#" class="list-group-item">
                            Custom Servers
                        </a>
                        <a href="#" class="list-group-item">
                            24/7 Support
                        </a>
                        <div class="list-group-item">
                            <button class="btn btn-secondary btn-lg btn-block text-truncate">Contact Us</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 pl-2">
                    <div class="list-group text-center my-3">
                        <div href="#" class="list-group-item text-white bg-dark">
                            <h4 class="text-center my-1">Managed</h4>
                        </div>
                        <div class="list-group-item text-uppercase font-weight-bold">
                            Contact Us
                        </div>
                        <a href="#" class="list-group-item">
                            Upto 10 TB HDD Storage
                        </a>
                        <a href="#" class="list-group-item">
                            Consultation
                        </a>
                        <a href="#" class="list-group-item">
                            Custom Servers
                        </a>
                        <a href="#" class="list-group-item">
                            24/7 Support
                        </a>
                        <div class="list-group-item">
                            <button class="btn btn-secondary btn-lg btn-block text-truncate">Contact Us</button>
                        </div>
                    </div>
                </div>
            </div>

            <hr>

        </div>
    </div>
</div>

Exchange the containner classes of each div:

You're like this:

<div class="col-md-4 pl-2">

Switch to:

<div class="col-md-3 pl-2">

Read more about the bootstrap Grid System