Forgive me if this does not warrant a new topic. I have been working with your Bootstrap cards, as they serve a very useful purpose for the work I am designing. Having said that, I am an amateur so please bear with me. When I replace the MDbootstrap pictures in the sample programs (from the tutorials), they do not always line up with each other in row 1 and row 2. This leaves the side-by-side cards with two different sizes of images, and thus two different sizes of Cards in height. I change the pictures to the same dimensions but they still do not end up at the correct height in their individual cards. Here is the code:

<main>
        <!--Main layout-->
        <div class="container">
          
           <!--Page heading-->
            <div class="row">
                <div class="col-md-12">
                    <h1 class="h1-responsive">McConchie's Projects 
                        <small class="text-muted">as they have never been seen before</small>
                    </h1>
                </div>
            </div>
            <!--/.Page heading-->
            <hr>
            
            <!--First row-->
            <div class="row">
                <!--First column-->
                <div class="col-md-6">
                    <!--Card-->
                    <div class="card">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">
                          <img src="http://www.mcconchies.ca/assets/images/grid.jpeg" alt="" />
                          <!--   <img src="http://mdbootstrap.com/images/regular/city/img%20(14).jpg" alt="" />-->
                            <a href="#!">
                                <div class="mask"></div>
                            </a>
                        </div>
                        <!--/.Card image-->

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title">Placement on the Grid</h4>
                            <!--Text-->
                            <p class="card-text">Placing an employee on the wage grid with the right step and increment date.</p>
                            <div class="read-more">
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-contact">Get answer</button>
                             </div>
                          
                            
                        </div>
                        <!--/.Card content-->

                    </div>
                    <!--/.Card-->    
                </div>
                <!--/.First column-->
                
                <!--Second column-->
                <div class="col-md-6">
                    <!--Card-->
                    <div class="card">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">
                            <!--<img src="http://mdbootstrap.com/images/regular/city/img%20(14).jpg" alt="" />-->
                              <img src="http://www.mcconchies.ca/assets/images/LOA.jpeg" alt="" /> 
                            <a href="#!">
                                <div class="mask"></div>
                            </a>
                        </div>
                        <!--/.Card image-->

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title">Leave of Absence</h4>
                            <!--Text-->
                            <p class="card-text">Apply sound principles and due process to the granting of leaves of absence under the Collective Agreement.</p>
                            <div class="read-more">
                                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-contact2">Get answer</button>
                             </div>

                        </div>
                        <!--/.Card content-->

                    </div>
                    <!--/.Card-->        
                </div>
                <!--/.Second column-->
            </div>
            <!--/.First row-->
            
            <!--Second row-->
            <div class="row">
                <!--First column-->
                <div class="col-md-6">
                    <!--Card-->
                    <div class="card">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">
                     <!--       <img src="http://mdbootstrap.com/images/regular/city/img%20(11).jpg" alt="" />-->
                                  <img src="http://www.mcconchies.ca/assets/images/grid.jpeg" alt="" /> 

                            <a href="#!">
                                <div class="mask"></div>
                            </a>
                        </div>
                        <!--/.Card image-->

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title">Card title</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <div class="read-more">
                                <a href="#!">Read more</a>
                            </div>
                        </div>
                        <!--/.Card content-->

                    </div>
                    <!--/.Card-->        
                </div>
                <!--/.First column-->
                
                <!--Second column-->
                <div class="col-md-6">
                    <!--Card-->
                    <div class="card">

                        <!--Card image-->
                        <div class="view overlay hm-white-slight">
                            <img src="http://mdbootstrap.com/images/regular/city/img%20(2).jpg" alt="" />
                            <a href="#!">
                                <div class="mask"></div>
                            </a>
                        </div>
                        <!--/.Card image-->

                        <!--Card content-->
                        <div class="card-block">
                            <!--Title-->
                            <h4 class="card-title">Card title</h4>
                            <!--Text-->
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <div class="read-more">
                                <a href="#!">Read more</a>
                            </div>
                        </div>
                        <!--/.Card content-->

                    </div>
                    <!--/.Card-->        
                </div>
                <!--Second column-->
            </div>

What am I doing wrong, assuming both the left-card picture and the right-card picture are precisely the same dimensions?

---