Struggling to structure my page with Grid/Flexbox

Started doing a tribute page and I cannot for the life of me get the image to go under the title. I would post a link but the forum wont allow it.

Basically I tried to use CSS grid as follows

#title {grid-area: header;}
#img-div {grid-area: right;}
#tribute-info {grid-area: main;}
#footer {grid-area: footer;}

#main {
  display: grid;
  grid-template-areas: 
    'header header'
    'main right'
    'footer footer';
}

#title {
  display: flex;
  flex-direction: column;
  width: 100vw;
  justify-content: center;
  align-content: center;
}

The image will not go under the header though, its on the right (off the page).

You could post your link like this: codepen .io/etc

Ahh right. I didn’t want to break any rules so I just left it off

codepen .io/Addleton/pen/dLdBVJ

The image currently links to a flower because the image I was using was a broken link. Also no content because I was trying to get the hang of flex/grid.

The #title element is not a direct child of the grid, so assigning it the grid-area is kind of useless. Try assigning the header grid-area to the <header> element instead.

A bit off-topic, but the <body> tag should be before the <div id="main"> tag. Likewise, the </body> tag should be after the last </div> tag.

Thank you so much. Seems to be working now.

Also fixed the body tags.