I cant get CSS grids to line up - html

Question

I got my header to work fine, however I cant get my pictures to follow my columns. Basically in the code below I want .left and .mid to line up horizontally ( and there is going to be a 3rd picture as well) Right now they are lining up vertically. I think I might be doing something wrong with the column set up but I am not sure
#import url('https://fonts.googleapis.com/css?family=Sofia');
body {
margin: 0;
}
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: auto;
grid-gap: 1em;
align-items: center;
text-align: center;
/*border-bottom: 4px solid black;*/
background:#0066cc;
}
#media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
.1 {
grid-column: 1;
}
.2 {
grid-column: 2;
}
.logo {
grid-column: 3;
background-image: url("images/cocinaheader.png");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 6vh;
}
.3 {
grid-column: 4;
}
.4 {
grid-column: 5;
}
.navLinks {
font-family: 'Sofia';
font-size: 1.2em;
text-transform: uppercase;
text-decoration: none;
color: black;
}
.navLinks:hover {
color: white;
border-left: 1px solid white;
border-right: 1px solid white;
padding: 1em 1em;
}
#twist {
color: blue;
}
banner {
padding: 1em 1em;
display: grid;
grid-template-rows: 100%;
}
.bannerlogo{
grid-row: 1;
/*background-image: url(images/banner.jpg);*/
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.h1{
font-family: 'Sofia';
font-size: 1em;
text-transform: uppercase;
color: black;
}
block {
display: grid;
grid-template-columns:20% 20% 20% 20% 20%;
/*grid-auto-rows: auto;*/
grid-gap: 1em;
align-items: center;
}
.left {
grid-column: 2;
background-image: url("images/foodleft.png");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 20vh;
}
.mid {
grid-column: 3;
background-image: url("images/foodmid.jpg");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 20vh;
}
<header>
<nav class="container">
<div class="1">
Home
</div>
<div class="2">
Menu
</div>
<div class="logo">
</div>
<div class="3">
About Us
</div>
<div class="4">
Contact Me
</div>
</nav>
</header>
<br><br><br><br>
<main>
<div class="banner">
<div class="bannerlogo">
<center>
<img src="images/banner.jpg">
</center>
</div>
<br><br><br><br><br><br>
<div class="h1">
<center><h1>A taste of our menu</h1></center>
</div>
<!-- Start block grid -->
<div class="block">
<div class="left"></div>
<div class="mid"></div>
</div>

Answer 1

You cannot use just numbers as class names in css. Try using .item1 .item2 etc...