раздел клиента не выровнен в html

Question

Я новичок в html css, и у меня возникла такая проблема:

Я хочу создать раздел для партнеров с 5 изображениями. На данный момент это выглядит так: howitisnow . Он не выровнен по горизонтали в одну строку и картинки получили разные размеры.

На самом деле я хочу, чтобы мой клиентский раздел выглядел так: howtolook .

Может ли кто-нибудь мне с этим помочь?

Вот мой html код:

<section class="page-section" id="services">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <h2 class="title font-bold mt-0">Client</h2>
                <hr class="divider my-4">
                <p class="subtitle mb-5">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem alias voluptates id harum expedita doloremque non explicabo cum inventore possimus!</p>
            </div>
        </div>
        <section class="py-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <a href="#">
                            <img class="img-fluid d-block mx-auto" src="stylesheets/post.jpg" alt="">
                        </a>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <a href="#">
                            <img class="img-fluid d-block mx-auto" src="stylesheets/auto.jpg" alt="">
                        </a>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <a href="#">
                            <img class="img-fluid d-block mx-auto" src="stylesheets/dts.png" alt="">
                        </a>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <a href="#">
                            <img class="img-fluid d-block mx-auto" src="stylesheets/mobiliar.png" alt="">


         </a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a href="#">
                        <img class="img-fluid d-block mx-auto" src="stylesheets/pf.JPG" alt="">
                    </a>
                </div>
            </div>
        </div>
    </section>
</div>

Answer 1

Чтобы добиться этого, все, что вам нужно сделать, это просто дать offset-md-1 вашему первому элементу во внутренней секции div, поэтому результат должен быть примерно таким:

<div class="container">
  <div class="row align-items-center">
    <div class="col-md-2 col-sm-6 offset-md-1">...</div>
    <div class="col-md-2 col-sm-6">...</div>
    <div class="col-md-2 col-sm-6">...</div>
    <div class="col-md-2 col-sm-6">...</div>
    <div class="col-md-2 col-sm-6">...</div>
  </div>
</div>

ПРИМЕЧАНИЕ: Это просто заставит их отображаться в 5 столбцах на больших экранах.

Вот рабочая демонстрация: codepen.io