title: Override CSS-Grid property for specific child
body: <p>I am new in CSS-Grid topic, I created a header for a website with the help of <strong>GRID</strong>, I created header with logo , navBar , searchbar , button with grid </p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>Now these last two properties <strong>align-items</strong> and <strong>justify-items</strong> are apply for all ie, for logo , navbar , searchbar , button.
  <em>My problem is</em> :I want to override this <strong>justify-items:center</strong> property 
   to <strong>justify-items:flex-start</strong> for navBar only. So who can I do this?</p>
  
  <p>Here is screenshot of header:</p>
  
  <p><img src="https://i.stack.imgur.com/1Vz9y.png" alt="here is screenshot of header"></p>