My CSS file connected and working fine with all elements except h1 and a class container-fluid and I am using bootstrap too

when I am declaring inline style for class 'container-fluid' .It is working fine but when I shift that style to CSS it doesn't work and I also unable to modify my h1 tag but my title id is working properly which means my CSS is connected properly. Actually I am modifying bootstrap classes. This is my main HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TinDog</title>

    <!-- CSS -->
    <link rel="stylesheet" href="css/styles.css">

    <!-- BOOTSTRAP -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&family=Ubuntu:wght@700&display=swap" rel="stylesheet">

    <!-- FONT-AWESOME -->
    <script src="https://kit.fontawesome.com/78e50f3289.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <section id="title">
      <!-- Nav Bar -->
      <div class="container-fluid">
        <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 col-md-12 col-sm-12">
            <h1>Meet new and interesting dogs nearby.</h1>
            <button type="button" class="btn btn-dark btn-lg"><i class="fab fa-app-store"></i> Download</button>
            <button type="button" class="btn btn-outline-light btn-lg">
              <i class="fab fa-google-play"></i> Download</button>
          </div>
          <div class = "col-lg-6 col-md-12 col-sm-12">
            <img src="images/iphone6.png" alt="iphone-mockup">
          </div>
        </div>
      </div>
    </section>

** My Css**

#title{
    background-color:#ff4c68;
}

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

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

.navbar-brand{
    font-family: 'Ubuntu';
    font-size: 2.3rem;
    line-height-bottom: 5;
}

Solution

I correct it myself by reading some docs, you have to just place your bootstrap link above your custom CSS if you want to play with bootstrap CSS or edit it.