Hello i read all of answers about my question not my answer there i have this Html with bottstap 5.2 :

<section id="title">

     <div >

       <!-- Nav Bar -->

       <nav >
         <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
           <span ></span>
         </button>
         <div  id="navbarTogglerDemo01">
           <a >Lindog</a>
           <ul >
             <li >
               <a  href="">Contact </a>
             </li>
             <li >
               <a  href="">Pricing</a>
             </li>
             <li >
               <a  href="">Download</a>
             </li>
           </ul>
         </div>
       </nav>


       <!-- Title -->



       <div >
         <div >
           <h1>Meet new and interesting dogs nearby.</h1>
           <button type="button">Download</button>
           <button type="button">Download</button>
         </div>
         <div >
           <img src="images/iphone6.png" alt="iphone-mockup">
         </div>
       </div>
     </div>
   </section>

i want to have padding around .container-fluid top 5% left and right 15% and bottom 5% i write this in css :

.container-fluid{
  padding: 5% 15%;
}

its dosent work when i inpect my site in chrome i see this section up on my css code :

container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}

how can i remove this two part :

        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);

i try to use mx-0 in row and dosent work

CodePudding user response：

Use "g-0" class with container-fluid