'Bootstrap, container-fluid class can't change the padding

I follow some tutorial, and I can't get the correct result, because the padding doesn't work. When I write padding: 3% 15%; then the top and bottom padding is added, but from the sides not. I make exactly what the teacher, but it just doesn't work for me. Have you an idea what's wrong with my code? Maybe cause I use the bootstrap 4.5 and in the lessons are the 4.0 version?

h1{
    font-family: 'Montserrat', sans-serif;
    size: 3rem;
    line-height: 1.5;
}

#title{
    background-color: #ff4c68;
}

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

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>TinDog</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
      integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
      crossorigin="anonymous"></script>
  </head>

  <body>

    <section id="title">
      <div class="container-fluid">

        <!-- Nav Bar -->

        <nav class="navbar navbar-expand-lg navbar-dark">
          <a class="navbar-brand" href="#">tindog</a>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-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>
        </nav>





        <!-- Title -->

        <div class="row">
          <div class="col-lg-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">
            <img src="images/iphone6.png" alt="iphone-mockup">
          </div>
        </div>



      </div>
    </section>



    <!-- Features -->

    <section id="features">

      <h3>Easy to use.</h3>
      <p>So easy to use, even your dog could do it.</p>

      <h3>Elite Clientele</h3>
      <p>We have all the dogs, the greatest dogs.</p>

      <h3>Guaranteed to work.</h3>
      <p>Find the love of your dog's life or your money back.</p>

    </section>


    <!-- Testimonials -->

    <section id="testimonials">

      <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
      <img src="images/dog-img.jpg" alt="dog-profile">
      <em>Pebbles, New York</em>

      <!-- <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
      <img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
      <em>Beverly, Illinois</em> -->

    </section>


    <!-- Press -->

    <section id="press">
      <img src="images/techcrunch.png" alt="tc-logo">
      <img src="images/tnw.png" alt="tnw-logo">
      <img src="images/bizinsider.png" alt="biz-insider-logo">
      <img src="images/mashable.png" alt="mashable-logo">

    </section>


    <!-- Pricing -->

    <section id="pricing">

      <h2>A Plan for Every Dog's Needs</h2>
      <p>Simple and affordable price plans for your and your dog.</p>


      <h3>Chihuahua</h3>
      <h2>Free</h2>
      <p>5 Matches Per Day</p>
      <p>10 Messages Per Day</p>
      <p>Unlimited App Usage</p>
      <button type="button">Sign Up</button>


      <h3>Labrador</h3>
      <h2>$49 / mo</h2>
      <p>Unlimited Matches</p>
      <p>Unlimited Messages</p>
      <p>Unlimited App Usage</p>
      <button type="button">Sign Up</button>


      <h3>Mastiff</h3>
      <h2>$99 / mo</h2>
      <p>Pirority Listing</p>
      <p>Unlimited Matches</p>
      <p>Unlimited Messages</p>
      <p>Unlimited App Usage</p>
      <button type="button">Sign Up</button>

    </section>


    <!-- Call to Action -->

    <section id="cta">

      <h3>Find the True Love of Your Dog's Life Today.</h3>
      <button type="button">Download</button>
      <button type="button">Download</button>

    </section>


    <!-- Footer -->

    <footer id="footer">

      <p>© Copyright 2018 TinDog</p>

    </footer>


  </body>

</html>

Solution 1:^[1]

You should add the "local" stylesheet link below the Bootstrap link (because Bootstrap has some default padding value).

Solution 2:^[2]

Your problem in the use of padding.

Padding 25%; // All four paddings are 25%
Padding 25% 50%; // Top and bottom paddings are 25%, right and left paddings are 50%
Padding 25% 50% 75%; // Top padding is 25%, right and left paddings are 50%, bottom padding is 75%
Padding 25% 50% 75% 100%; // Top padding is 25%, right padding is 50%, bottom padding is 75%, left padding is 100%

Solution 3:^[3]

I'm doing this classes right now, and I had the same issue as you have, and what I did, change the position of stylesheet. I just call my local css for the last item and then works.

Solution 4:^[4]

In your head

  <head>
    <!-- your code -->
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <!-- other links -->
   
  </head>

You have first added your external CSS file and then you added a link for Bootstrap CSS which means your customized container-fluid class will be overwritten by container-fluid class of Bootstrap and because container-fluid class of Bootstrap has other values for padding-right and padding-left

/*Bootstrap class v4.6.0*/
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

your values for padding-right and padding-left won't be applied, but since it hasn't specified values for padding-top and padding-bottom, your own values will be applied.

In order to fix this as mentioned you should simply change place of your external CSS file with Bootstrap CSS link.

  <head>
    <!-- your code -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">
    <!-- other links -->
   
  </head>

Solution 5:^[5]

You should add the css link at last after adding the external bootstrap file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	csabanagy11
Solution 2
Solution 3	user2278421
Solution 4	hanie
Solution 5	pratham sharma

'Bootstrap, container-fluid class can't change the padding

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]