Flex Box aligning items in center instead of left

Issue

So I am using a col-3 / col-12 grid system and using a flexbox to align my items in the product display. For whatever reason when I don't have "FOUR" products in each row it aligns my product display boxes in the center instead of under the respective columns which would be "LEFT" for this example. See the attached screenshots for additional details. Also, I tried to make a new row to see if the items would just align to the left however that did not work either. Let me know if you need additional info - I am fairly new to stack!

How I want them to be aligned.

Aligns perfectly when 4 products fill the row.

.product-display .col-content {
    -webkit-box-shadow: 1px 2px 6px -1px rgb(0 0 0 / 20%);
    -moz-box-shadow: 1px 2px 6px -1px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 1px 2px 6px -1px rgba(0, 0, 0, 0.2);
    box-shadow: 1px 2px 6px -1px rgb(0 0 0 / 50%);
    padding: 0 1rem 1.5rem;
    margin: 0 .5rem .5rem;
    text-align: center;
    padding-top: 3%; 
    padding-bottom: 3%;
    border-radius: 5px;
}

.product-display .row {
    max-width: 100%;
    margin: auto;
    margin-top: 4rem;
}

.product-name {
    margin-top: 0rem;
    margin-bottom: 2rem;
    position: relative;
    max-width: 100%;
    margin-bottom: 2rem;
    font-weight: bold;
    padding-left: 1.5rem;
}
.row-spacing {
    padding-bottom: 4rem;
    max-width: 100%;
}

.bullet-text {
    margin-top: 0rem;
    margin-bottom: .5rem;
    font-size: medium;
    text-align: left;
}

.caster-series-image {
   width: auto;
   height: auto;
   border: 0;
   margin: 0px;
   padding: 10px;
}


@media only screen and (max-width: 1200px) {
    .caster-series-image {
        max-width: 290px;
        max-height: 290px;
        padding: 10px;
    }    
}

@media only screen and (max-width: 1200px) {
    .col-content {
        width: 100%;
        max-height: auto;
        text-align: center;
        box-sizing: border-box;
    }    
}

 <div class="row">
        <div class="col-3 row-spacing">
            <div class="col-12">
              <h3 class="product-name"><a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/avant-series.html"><span style="color: #007dbd;">Avant</span></a></h3>  
                <div class="col-content">
                    <a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/avant-series.html"><img src="https://casterdepot.com/media/Shepherd/avant.jpg" class="caster-series-image" alt=""></a>
                </div>
            </div>
            <div class="col-12">
                <div class="col-content">
                    <ul class="bullet-text">
                        <li><b>Capacity:</b> 80-100 lbs</li>
                        <li><b>Sizes:</b> 2", 3", 4", 5"</li>
                        <li><b>Height:</b> 2 &frac34;" - 3 <sup>7</sup>&#8260;<sub>32</sub>"</li>
                    </ul> 
                    <a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/avant-series.html">
                        <button class="cd-button" type="button">Read More</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-3 row-spacing">
            <div class="col-12">
              <h3 class="product-name"><a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/genesis-series.html"><span style="color: #007dbd;">Genesis</span></a></h3>  
                <div class="col-content">
                    <a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/genesis-series.html"><img src="https://casterdepot.com/media/Shepherd/genesis.jpg" class="caster-series-image" alt=""></a>
                </div>
            </div>
            <div class="col-12">
                <div class="col-content">
                    <ul class="bullet-text">
                        <li><b>Capacity:</b> 110-225 lbs</li>
                        <li><b>Sizes:</b> 2", 3"</li>
                        <li><b>Height:</b> 2" - 5 &frac58;"</li>
                    </ul> 
                    <a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/genesis-series.html">
                        <button class="cd-button" type="button">Read More</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-3 row-spacing">
            <div class="col-12">
              <h3 class="product-name"><a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/optimus-series.html"><span style="color: #007dbd;">Optimus</span></a></h3>  
                <div class="col-content">
                    <a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/optimus-series.html"><img src="https://casterdepot.com/media/Shepherd/optimus.jpg" class="caster-series-image" alt=""></a>
                </div>
            </div>
            <div class="col-12">
                <div class="col-content">
                    <ul class="bullet-text">
                        <li><b>Capacity:</b> 140 lbs</li>
                        <li><b>Sizes:</b> 2 &frac18;"</li>
                        <li><b>Height:</b> 4 <sup>9</sup>&#8260;<sub>32</sub>"</li>
                    </ul> 
                    <a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/optimus-series.html">
                        <button class="cd-button" type="button">Read More</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-3 row-spacing">
            <div class="col-12">
              <h3 class="product-name"><a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/eclipse-series.html"><span style="color: #007dbd;">Eclipse</span></a></h3>  
                <div class="col-content">
                    <a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/eclipse-series.html"><img src="https://casterdepot.com/media/Shepherd/eclipse.jpg" class="caster-series-image" alt=""></a>
                </div>
            </div>
            <div class="col-12">
                <div class="col-content">
                    <ul class="bullet-text">
                        <li><b>Capacity:</b> 120-125 lbs</li>
                        <li><b>Sizes:</b> 3", 4"</li>
                        <li><b>Height:</b> 4 <sup>5</sup>&#8260;<sub>16</sub>" - 5 &frac58;"</li>
                    </ul> 
                    <a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/eclipse-series.html">
                        <button class="cd-button" type="button">Read More</button>
                    </a>
                </div>
            </div>
        </div>
    </div>
        <div class="col-3 row-spacing">
            <div class="col-12">
              <h3 class="product-name"><a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/optimus-series.html"><span style="color: #007dbd;">Optimus</span></a></h3>  
                <div class="col-content">
                    <a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/optimus-series.html"><img src="https://casterdepot.com/media/Shepherd/optimus.jpg" class="caster-series-image" alt=""></a>
                </div>
            </div>
            <div class="col-12">
                <div class="col-content">
                    <ul class="bullet-text">
                        <li><b>Capacity:</b> 140 lbs</li>
                        <li><b>Sizes:</b> 2 &frac18;"</li>
                        <li><b>Height:</b> 4 <sup>9</sup>&#8260;<sub>32</sub>"</li>
                    </ul> 
                    <a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/optimus-series.html">
                        <button class="cd-button" type="button">Read More</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="col-3 row-spacing">
            <div class="col-12">
              <h3 class="product-name"><a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/eclipse-series.html"><span style="color: #007dbd;">Eclipse</span></a></h3>  
                <div class="col-content">
                    <a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/eclipse-series.html"><img src="https://casterdepot.com/media/Shepherd/eclipse.jpg" class="caster-series-image" alt=""></a>
                </div>
            </div>
            <div class="col-12">
                <div class="col-content">
                    <ul class="bullet-text">
                        <li><b>Capacity:</b> 120-125 lbs</li>
                        <li><b>Sizes:</b> 3", 4"</li>
                        <li><b>Height:</b> 4 <sup>5</sup>&#8260;<sub>16</sub>" - 5 &frac58;"</li>
                    </ul> 
                    <a href="{{config path="web/secure/base_url"}}/brands/shepherd-casters/casters/eclipse-series.html">
                        <button class="cd-button" type="button">Read More</button>
                    </a>
                </div>
            </div>
        </div>
</div>

Solution

I wasn't able to get this to work with the margin on the .product display. However - thanks for letting me know it had to do with my margin.

This seemed to do the trick! -->

I added the following to my CSS:

.row-spacing {
    padding-bottom: 4rem;
    max-width: 100%;
    margin: initial;
}

Answered By - カメロン