CSS Grid layout with columns used as indentation borders not working as expected

I am creating a basic CSS Grid for my website. Right now, it has 3 rows. One for the logo and nav, another for a banner image, and a third for text content.

The grid has a total of 6 columns, two of which are a set size (25px) and I use them as borders to indent the content contained within certain css grid rows. As you can see in the attached images, the top-nav (logo+navigation) display as expected and are slightly indented using the 'left' and 'right' CSS grid border columns.

After that, the banner image appears on a new css grid row as expected, and takes up all 6 columns (no left or right border columns used).

Finally, the third row, that has text in it should be spanning over 4 columns, with the left and right css grid columns displaying. That is where everything turns into a mess.

Instead, the third row overlays the banner on the second row, does not follow the rule of using the left and right grid columns for indenting, and the navigation row (logo+nav), disappears.

I provide the code here, and also include a Codepen, along with pictures to illustrate the problem.

I believe the problem has to do with those left and right border columns because if I have the grid row spread across all 6 columns, the text displays properly.

Can you help me figure out what I am doing wrong? Maybe there is a better approach to achieve the border without the extra columns?

Thank you!

Codepen

[https://codepen.io/BillRaymond/pen/vYOJEZY][1]

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="grid.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="logo"><img src="https://via.placeholder.com/250x35?text=Logo" alt="" class="logo-image"></div>
    <div class="nav">HOME ABOUT BLOG LINKEDIN TWITTER </div>
    <div class="banner"><img src="https://via.placeholder.com/1366x500?text=banner" alt="" class="banner-image"></div>
    <div class="title">This text should be below the banner with a 'left' and 'right' border. The logo and navigation
      bar do not show.</div>
  </div>
</body>

</html>

CSS/SCSS

// full size grid
.container {
    margin: auto;
    display: grid;
    max-width: 1366px;
        grid-template-areas:
        "left   logo   nav    nav    nav    right"
        "banner banner banner banner banner banner"
        "left   title  title  title  title  right";
       // ^^ comment the above line and add a semi-colon to the line above that. The logo and nav will appear again.
    grid-template-columns: 25px auto auto auto auto 25px;
    grid-template-rows: auto auto auto;
} // end full-size container

.left {
    display: grid;
    grid-area: left;
}

.right {
    display: grid;
    grid-area: right;
}

.logo {
    display: grid;
    grid-area: logo;
}

.nav {
    display: grid;
    grid-area: nav;
    justify-content: end;
}

.banner {
    display: grid;
    grid-area: banner;
}

.title {
    display: title;
    grid-area: title;
}

Solution

Grid areas must be rectangles. You cannot spread a grid-area like you're trying to. Instead rename the areas left and right (and properly assign them to their respective CSS declarations):

grid-template-areas:
    "leftTop      logo   nav    nav    nav    rightTop"
    "banner       banner banner banner banner banner"
    "leftBottom   title  title  title  title  rightBottom";