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

      <!-- Nav Bar -->

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

<styles.css>

/* Containers */

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

/* Navigation Bar */

#navbar .container-fluid {
    padding: 0 0 4.5rem;
}

/* Title Section */

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

I want to remain the .container-fluid {padding: 7% 15%} because it is applied to all the other sections of the website.

Only for the Navigation bar, I want to make different padding to that container, I have tried the following combined selectors, however they didn't work.

    #navbar .container-fluid 
    .navbar .container-fluid

It only works if I add inline css, what if external css? How do to it?

Thank you.

Leo the lion
  • 3,164
  • 2
  • 22
  • 40
Pang Zi Ying
  • 1
  • 2
  • Not able to understand whare you want to achieve. There is confusion that for which element you want to apply what padding. – Leo the lion Mar 22 '23 at 13:53
  • you can give extra class to navbar container and it will work. what is issue then? – Leo the lion Mar 22 '23 at 13:58
  • Apologize for the confusion, I want to apply padding: 0 0 4.5 rem to #navbar .container-fluid, but it didn't work – Pang Zi Ying Mar 22 '23 at 13:58
  • see here https://jsfiddle.net/ubeaw3kL/ i have added color to both class and can see they are applying different different. Use different name. – Leo the lion Mar 22 '23 at 14:00
  • and if you want same class then see this https://jsfiddle.net/ubeaw3kL/1/ – Leo the lion Mar 22 '23 at 14:01
  • if I change the name to become container-fluid1, the alignment of nav-item runs, since container-fluid is under bootstrap, so I couldn't change the name right? – Pang Zi Ying Mar 22 '23 at 14:09
  • In your CSS rule `#title .container-fluid { padding: 3% 15% 7%; }` being last defined overrides all the above as `#title` it is the main parent of a `.container-fluid` references. The rule's current effect: *all `.container-fluid` inside `#title` will use `padding: 3% 15% 7%;`* – Rene van der Lende Mar 22 '23 at 16:14

1 Answers1

0

You can do the following:

/* Navigation Bar */

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

/* Title Section */

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

#navbar .container-fluid {
   padding: 0 0 4.5rem;
}

You can also fix this by adding !important at the end like this:

#navbar .container-fluid {
   padding: 0 0 4.5rem !important;
}

But I don't recommend it.

More about css order can you find here.

WebPrograme
  • 117
  • 6