Check out this JSFiddle link for a simple Google.com recreation.
I'm attempting to organize the top navigation bar by creating separate containers for About, Store, Gmail, and Images. The issue seems to be related to the justify-items:center; property on the container class.
Here is an image depicting the desired layout: View Image Example Here.
HTML:
<div class="container">
<div class = "nav-container">
<nav class = "nav-container-grid">
<a class = "nested-a">About</a>
<a class = "nested-b">Store</a>
<a class = "nested-c">Gmail</a>
<a class = "nested-d">Images</a>
</nav>
</div>
<div id ="image-container">
<img src='https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png' alt='Google'>
</div>
<div class="button-container">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
<div class="search-container">
<input type="search" placeholder="Search">
</div>
</div>
CSS:
.container {
display: grid;
grid-template-columns: 1;
grid-template-rows: 1fr 2fr 1fr 1fr;
justify-items: center;
}
.nav-container {
grid-row: 1;
}
.nav-container-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.nav-container-grid a {
border: 2px solid #000000;
text-align: right;
}
.image-container {
grid-row: 2;
}
.search-container {
grid-row: 3;
}
.button-container {
grid-row: 4;
}
.nested-a {
grid-column-start: 1;
grid-row-start: 1;
}
.nested-b{
grid-column-start: 2;
grid-row-start: 1;
}
.nested-c{
grid-column-start: 3;
grid-row-start: 1;
}
.nested-d{
grid-column-start:4;
grid-row-start: 1;
}