I am facing an issue with the Bootstrap container fluid. Adding padding using CSS is not working as expected, and I noticed that it only works when we use the !important declaration. Do you have any insights on why this might be happening? Below is the code snippet:
.container-fluid {
padding: 3% 15% !important;
}
Here is the HTML code snippet:
<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 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>
</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>
And here is the related CSS code:
#title {
background-color: #ff4c78;
}
.container-fluid {
padding: 3% 15%;
}
h1 {
font-family: "Montserrat", sans-serif;
font-size: 3rem;
line-height: 1.5rem;
}