My logo text is not displaying correctly in the grid display

Question

I'm trying to make the logo take full width instead of leaving a white background around it.

body {
  text-transform: capitalize;
  margin: 0;
}

.page {
  background-image: url(./hero-bg.jpg);
  display: grid;
  height: 100vh;
  grid-template-columns: 10% auto;
  grid-template-rows: 15% auto auto auto;
  grid-template-areas: "logo header header header" "sidebar section section section" "sidebar main main main " "sidebar footer footer footer";
}

.logo {
  grid-area: logo;
  background-color: rgba(255, 0, 0, 0.55);
}

<div class="page">
  <nav>
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">policy</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
  <h1 class="logo">Batoot</h1>
  <aside>sidebar</aside>
  <section>section</section>
  <main>main content</main>
  <footer>footer</footer>
</div>

I tried changing the grid template area properties but it didn't solve my problem

Answer 1

If I were doing this, I would just set the columns and rows where you want them, and leave out those areas.

I added some borders and background color just to illustrate where things are.

body {
  text-transform: capitalize;
  margin: 0;
  background-color: #FFFF3344;
  padding-top: 0;
  border: solid green 1px;
}

nav {
  display: none;
}

.page {
  background-color: #0000FF0C;
  border: solid 1px cyan;
  background-image: url(./hero-bg.jpg);
  display: grid;
  grid-template-columns: 10% 1fr;
  grid-template-rows: auto 1fr 1fr 1fr;
}

.logo {
  grid-area: logo;
  grid-column: 1 / 3;
  grid-row: 1 / 1;
  background-color: rgba(255, 0, 0, 0.55);
  border: solid 2px lime;
  /* deal with using h1 not a div by setting margin and padding */
  margin: 0;
  padding: 0;
}

section {
  grid-column: 2;
  grid-row: 2;
}

main {
  grid-column: 2;
  grid-row: 3;
}

aside {
  grid-column: 1;
  grid-row: 2 / 5;
  border: solid blue 1px;
}

footer {
  grid-column: 2 / 3;
}

  

    

      
home
      
about
      
policy
      
contact
    
  
  
Batoot
  
sidebar
  
section
  
main content
  
footer