I am struggling to remove the padding setting for the navbar in my code. I have set all elements in the body to padding: 10px, but I want the navbar to have no padding so it is flush against the edges. I attempted adding padding: 0px to .navbar-custom, but it did not work. Here is the snippet of my code:
<nav class="navbar navbar-custom">
<a class="navbar-brand" href="#">Jump to...</a>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa-solid fa-list-ul"></i>
<i class="fa-solid fa-x"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#smartphone">Item 1</a>
<a class="nav-link" href="#data">Item 2</a>
<a class="nav-link" href="#bam">Item 3</a>
<a class="nav-link" href="#sim">Item 4</a>
</div>
</div>
</nav>
</div>
.navbar-custom {
background-color: #0e47b0;
width: 100% !important;
white-space: nowrap;
padding: none !important;
}
.navbar-toggler.collapsed .fa-x {
display: none !important;
}
.navbar-toggler:not(.collapsed) .fa-list-ul {
display: none;
}
.navbar-toggler {
box-shadow: none !important;
outline: 0px !important;
border: none !important;
}
.navbar-custom .navbar-brand, .navbar-custom .navbar-text {
color: white;
padding-left: 5%;
}
.nav-link, .nav-link:hover, .nav-link:visited, .nav-link:focus, .nav-link:active {
color: white;
padding-left: 5%;
text-decoration: none !important;
}
body {
height: 100%;
margin: 0px;
padding: 10px;
max-width: 100%;
font-family: 'Quicksand', sans-serif;
background-color: #f5f5f5;
justify-content: center;
align-content: center;
}