Overriding Bootstrap @media (min-width: 768px) using CSS not working

Question

On the navigation on my website, I am using bootstrap and for my active page, I am trying to add a horizontal line below it.

For the navigation, Bootstrap has set the padding to

@media (min-width: 768px)
    navbar.less:286
    .navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}

I am using border-bottom to act as the horizontal line below to show the active page, but i dont want it to show 15px below the page title.

So I inseted this code into my custom.css file:

.activeNavPage  {
    border-bottom: solid 1px rgb(255, 95, 0);
    padding-bottom: 10px;
    margin-bottom: 4px;
}

As well as:

@media (min-width: 768px)
navbar.less:286
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 10px;
}

To try and override the existing boostrap CSS, yet my @media query does nothing and my .activeNavPage CSS only apples style for the border and the margin, but it does not override the padding neither.

Answer 1

Try adding !important. Such as padding-left:10px !important;