How to fix padding problem in Bootstrap 5?

Question

The top down padding is set to 3% but left right padding of 15% doesn't work. Can someone explain what is wrong here? I want to set the top-down padding of 3% and left-right padding of 15% with respective to fluid container. But it seems that left-right padding is not working. I debugged it using chrome developer tools. But the left- right padding were crossed out.

<div class="container-fluid">
  <div class="navbar navbar-expand-lg navbar-dark">
    <a class="navbar-brand" href="">Tindog</a>    
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <ul class="navbar-nav ms-auto">
            <li class ="nav-item">
                <a class="nav-link" href="">Contact</a>
            </li>
            <li class ="nav-item">
                <a class="nav-link" href="">Pricing</a>
            </li>
            <li class ="nav-item">
                <a class="nav-link" href="">Download</a>
            </li>
        </ul>   
    </div>
  </div>





  <!-- Title -->

  <div class="row">
    <div class="col-lg-6 col-md-6">
      <h1>Meet new and interesting dogs nearby.</h1>
      <button type="button">Download</button>
      <button type="button">Download</button>
    </div>
    <div class="col-lg-6 col-md-6">
      <img src="images/iphone6.png" alt="iphone-mockup">
    </div>
  </div>
</div>

CSS FILE

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

Answer 1

将“ <link rel="stylesheet" ”放在头部的底部，这样它就不会出现在引导链接的下方:) 从上到下的优先级！

Answer 2

Bootstrap containers have horizontal padding already set. You can limit the width like this <div class="container-fluid" style="max-width: calc( 100% - (15% * 2) )">...</div>

Answer 3

From my experience, bootstrap has default dimensions for its margin and padding. Setting custom dimensions may not work.

container-fluid is a custom bootstrap class. You cannot override it. You'd need to add another class if you want to customize the padding.

or customise according to the docs: https://getbootstrap.com/docs/5.2/layout/containers/#how-they-work