How do I resolve unaligned boxes in grid-area

Question

I'm working on a personal portfolio project currently and I've met some errors I'm having difficulty solving. I was doing fine with the furniture page alignment, but when it comes to accessories.html, the tools.jpg and decorative-accents.jpg are not aligned properly even tho they are the same proportionate height and width (i took into account the gap and borders they have to cross) as the other images. I tried all the align and justify properties but none worked, nor did using grid rows and columns. Did I get the image sizes wrong? Would appreciate if an expert can help resolve this issue.

Link to the GitHub repo: https://github.com/helloyellowmellowcello/WareHouse_FurnitureRetail/tree/Redesign_%231

.product__list {
 display: grid;
  min-width: 1189px;
  grid-template-areas: 'fabric fabric organisation'
                     'mirrorsclocks mirrorsclocks organisation'
                     'bedroom bathroom dining-room'
                     'kitchen decorativeaccents patio'
                     'lighting decorativeaccents tools';
  /*grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(3, 1fr);*/
}

#fabric {
  grid-area: fabric;
  /*grid-column: 1 / span 2;
  grid-row: 1 / 2;*/
}

#organisation {
  grid-area: organisation;
  max-height: 731px;
  /*grid-column: 3 / span 1;
  grid-row: 1 / 3;*/
}

#decorativeaccents {
  grid-area: decorativeaccents;
  max-height: 731px;
  /*grid-column: 2 / span 1;
  grid-row: 4 / 6;*/
}

#lighting {
  grid-area: lighting;
 /*grid-column: 1 / span 1;
  grid-row: 5 / 6;*/
}

 #mirrorsclocks {
  grid-area: mirrorsclocks;
  /*grid-column: 1 / span 2;
  grid-row: 2 / 3;*/
}

#bedroom {
  grid-area: bedroom;
  /*grid-column: 1 / span 1;
  grid-row: 3 / 4;*/
}

#bathroom {
  grid-area: bathroom;
  /*grid-column: 2 / span 1;
  grid-row: 3 / 4;*/
}

#dining-room {
  grid-area: dining-room;
  /*grid-column: 3 / span 1;
  grid-row: 3 / 4;*/
}

#kitchen {
  grid-area: kitchen;
  /*grid-column: 1 / span 1;
  grid-row: 4 / 5;*/
}

#patio {
  grid-area: patio;
  /*grid-column: 3 / span 1;
  grid-row: 4 / 5;*/
}

#tools {
  grid-area: tools;
  /*grid-column: 3 / span 1;
  grid-row: 5 / 6;*/
}

Answer 1

Figured out why there were extra whitespace. Some elements in the main__nav was using the same id as those in the #main content, so the solution is to simply rename the category blocks #lighting and #tools into another unique id.