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 to media Queries, 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;
    }

}

Play around with this approach:

.header {
  width: 100%;
  background-color: blue;
  
}
.nav_primary {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  margin: 0 auto;
  width: 500px;
  height: 35px;
  
 }
.nav_primary li {
  list-style: none;
 
}

.nav_primary li a {
   color: white;
   text-decoration: none;
}

When you add selectors in CSS pay attention to their order.
The recommended way is to style HTML elements from top to bottom, in order not to overwrite the previously defined style.

Thank you for your help.
Will check your approach.
Could you please point out where i made a mistake with the order and what caused the issue?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.