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

[YoungZeeZee]

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

 <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>

*,
*::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;
    }

}

 

[Yugal]

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

*,
*::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.