• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Why I have padding-left on my .nav_primary when i did not set it

Hi All,

Could you please tell me why i have padding on my .nav_primary when i did not set it?
I added a media query and was not able to center that class and then found out there is a padding-left and do not know why.
When i add padding:0 all work.
Here are my codes
Thank you

HTML:
 <header class="header">
        <div class="wrapper flex">
            <div class="image">
                <img src="img/logo.svg" alt="">
            </div>

            <nav>
                <ul class="nav_primary">
                    <li class="nav_link"><a href="#">About us</a></li>
                    <li class="nav_link"><a href="#">Map</a></li>
                    <li class="nav_link"><a href="#">Products</a></li>
                    <li class="nav_link"><a href="#">News</a></li>
                    <li class="nav_link"><a href="#">Sign in</a></li>
                </ul>
            </nav>

        </div>
    </header>

CSS:
*,
*::before,
*::after {

    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-size: 16px;

}

img {
    width: 100%;
}

/* NAVigation */

.header {
    background: lightcoral;
    padding: 0.5em;
}

.wrapper {
    border: 1px solid yellow;
    width: 70%;
    max-width: 850px;
    margin: 0 auto;
}

.nav_link {
    list-style: none;
    margin-left: 0.75em;


}

/* .nav_link:nth-child(5) {
    margin-right: 0;
} */

.nav_link>a {
    text-decoration: none;
    color: black;
    font-weight: 700;
}


.flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.image {
    /* border: 1px solid green; */
    display: flex;
    justify-content: center;
}

.nav_primary {
    display: flex;
    flex-direction: row;
    border: 1px solid yellow;
}

@media (max-width: 500px) {

    .flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .nav_primary {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* padding: 0; */
    }

    .nav_link {
        margin-left: 0;
    }

}
 
Resets the pages default margin and padding for the entire html file , not only body . This will allow you to have more control when you are styling specific elements.
So you need to add margin and padding in

CSS:
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

The main reason this is used is because sometimes the browser will apply it's default margin/padding to elements, and in a case where you do not want there to be any margin or padding space around an element you will want to define that there is no margin or padding.
 
Top Bottom