How to implement container-fluid in container-fluid?

Question

css

Good night dear experts. I would like to ask you a question about the implementation of this feature. I’ve already broken my whole head .... but I didn’t manage to dig out the solution like that.

There is a footer > its background stretches across the width of the screen container-fluid'om
In the footer'e, everything is divided into col-md-3 columns, each of which contains this or that information.

<footer>
    <div class="container-fluid">
        <div class="row footer-back">
            <div class="container">
                <div class="footer">
                    <div class="col-md-3">
                        <ul>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>

                    <div class="col-md-3">
                        <ul>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>

                    <div class="col-md-3">
                        <ul>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>

                    <div class="col-md-3">
                        <ul>
                            <li></li>
                            <li>
                                <ul class="social">
                                    <li></li>
                                    <li></li>
                                </ul>
                            </li>

                            <li class="sale">Мы принимаем к оплате</li>
                            <li>
                                <ul class="sale-card">
                                    <li><img src="src/images/png/visa.png" alt=""></li>
                                    <li><img src="src/images/png/mastercard.png" alt=""></li>
                                    <li><img src="src/images/png/yandexmoney.png" alt=""></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

I don’t quite understand how to put container-fluid into container-fluid in order to stretch this band.
Maybe I'm doing something wrong? Thank you!

Answer 1

https://jsfiddle.net/p82tk03s/