I have the setting for all elements in the body set to padding: 10px. I want to remove the padding setting for the navbar and set it to 0px so that it is flush against the edges but I don't know how to. I have tried to just add padding: 0px to .navbar-custom but it didn't do anything Here is my code:

            <nav >
                    <a  href="#">Jump to...</a>
                        <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                            <i ></i>
                            <i ></i>
                        </button>
                <div  id="navbarNavAltMarkup">
                    <div >
                        <a  href="#smartphone">Item 1</a>
                        <a  href="#data">Item 2</a>
                        <a  href="#bam">Item 3</a>
                        <a  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;

}

CodePudding user response：

Because the navbar is part of the body content it will always be constrained to the styles applied, I would recommend making a container style div after the navbar to put the padding on that will open just after the navbar and close before the closing body tag. this way the styles that you want for your content can still be applied effectively skipping putting them on the navbar as well.