How can I remove spaces from the container?

first picture
second picture

I'm just learning how to use Bootstrap. On the first picture everything is good, because on the background is the picture. But on the second picture I have margins, and it is background color. How remove margins?
Here a code of the second one:

<div class="container-fluid bg-image w-100" style="background:rgb(201, 188, 188);">
                <div class="text-center display-3 pt-5">
                    <p>What We Do</p>
                </div>
                <p class="text-center pt-2" style="padding-right:20%; padding-left: 20%;">Lorem ipsum dolor sit amet consectetur 
                    adipisicing elit. A veniam totam eaque praesentium excepturi voluptas suscipit dicta, 
                    blanditiis repudiandae error! Quia dignissimos obcaecati vero illum optio ducimus 
                    iure assumenda earum hic soluta ratione voluptas laudantium quasi incidunt maxime, 
                    autem vel repellendus enim. Maiores enim assumenda fugiat dicta distinctio, a neque.</p>
                <div class="text-center pt-2 pb-2"><img src="./img/03.png" alt="" style="width: 50%;"></div>
                <p class="text-center pt-5 pb-5">Images from <span style="text-decoration: underline">Freepik</span></p>
            </div>

Try using this in bg-image class in css styling.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

{
  padding : 0 !important;
  margin : 0 !important;
}

<!-- end snippet -->