Override CSS-Grid property for specific child

Question

I am new in CSS-Grid topic, I created a header for a website with the help of GRID, I created header with logo , navBar , searchbar , button with grid

.header {
    height: 60px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 3fr 0.1fr 0.5fr;
    grid-auto-rows: 70px;
    align-items:center;
    justify-items: center;
}

Now these last two properties align-items and justify-items are apply for all ie, for logo , navbar , searchbar , button. My problem is :I want to override this justify-items:center property to justify-items:flex-start for navBar only. So who can I do this?

Here is screenshot of header:

Answer 1

If you're writing in pure CSS, you can add another line that is more specific, like this

.header .navBar {
    justify-items:flex-start;
}

This will take priority over the previous css style you have. Generally speaking the more specific styles are applied first.