Как переместить title и text в начало самого блока?

Question

[GeorgiyStepanov]

можно ли сделать так, чтобы заголовок и текст блока переместить в самое начало блока,
и так чтобы у них была 100% ширина?



HTML kod:

spoiler

<section class="page__about-us">
                <div class="about-us__container">
                    <div class="about-us__content content-about-us">
                        <h1 class="content-about-us__title">About Us</h1>
                        <p class="content-about-us__text">All of our furniture uses the best materials and choices for our customers.All of our furniture uses the best materials </p>
                        <div class="content-about-us__benefits benefits-content-about-us">
                            <div class="benefits-content-about-us__benefit benefit-benefits-content-about-us">
                                <img src="./img/best-quality-logo.png" alt="Shield" class="benefit-benefits-content-about-us__img">
                                <h1 class="benefit-benefits-content-about-us__title">Best Quality</h1>
                                <p class="benefit-benefits-content-about-us__text">All of our furniture uses the best materials and choices</p>
                            </div>
                            <div class="benefits-content-about-us__benefit benefit-benefits-content-about-us">
                                <img src="./img/free-shopping-logo.png" alt="Galochka" class="benefit-benefits-content-about-us__img">
                                <h1 class="benefit-benefits-content-about-us__title">Free Shpping</h1>
                                <p class="benefit-benefits-content-about-us__text">All of our furniture uses the best materials and choices</p>
                            </div>
                            <div class="benefits-content-about-us__benefit benefit-benefits-content-about-us">
                                <img src="./img/free-shipping-logo.png" alt="Car" class="benefit-benefits-content-about-us__img">
                                <h1 class="benefit-benefits-content-about-us__title">Free Shpping</h1>
                                <p class="benefit-benefits-content-about-us__text">All of our furniture uses the best materials and choices</p>
                            </div>
                        </div>
                    </div>
                    <div class="about-us__img img-about-us">
                        <img src="./img/benefits-background.jpg" alt="Sofa" class="img-about-us__img">
                    </div>
                </div>
            </section>

Comments

[Антон Литвиненко]

верстку править можно?

[Ankhena]

Так гридами.
grid-column: 1/-1
Что именно не получилось? Покажите в песочнице на codepen.io

[GeorgiyStepanov]

Антон Литвиненко, Конечно

[GeorgiyStepanov]

Ankhena, https://codepen.io/goshan_207/pen/bGjVZLN?editors=1100

[Ankhena]

GeorgiyStepanov, about-us__container - этому грид на 2 колонки.
about-us__content content-about-us - этого в помойку
Заголовку и подзаголовку сказать, что они на два столбца.

[GeorgiyStepanov]

Ankhena, Понял, спасибо за помощь и внимание. Удачи.