Tribute Page: Grid elements overlapping (don't want them to)

Thank you for any and all help I receive with my beginner question.

Just doing the Tribute page. I made it alright, then wanted to do a nicer layout using grid. It should be a very simple layout with the image, caption, title/subtitle all just flowing vertically…the only part that grid is really needed is I wanted to have a long vertical line on either side of the main text body, for purely aesthetic reasons.

After implementing grid the elements the first few elements want to stack on top of my first element, the image. Then where I want my “tribute-info” info to have an ornamental vertical line on either side they simply flow down the page after each other. Have spent hours fooling with it. I realize my code isn’t perfectly clean… I would like to play with the dimensions further, just learning by messing with it in the space is more helpful to me than all the reading and memorizations.

I would appreciate any input as to why things the grid items are overlapping/cascading in a different way than my grid-template-areas is specifying.

Second issue: it also says my link is failing the test. The link works just fine! Opens in another window. I’m sure it’s something small and stupid but would also appreciate finding my mistake.

Again, thanks so much.

If the directions page is going to be from top to bottom, why don’t you try to use flex-box ? i think it will be easier.

Apologies, here’s the codepen:

I did consider going back and using flexbox instead, but I did want the bottom portion (the main body of text) to have a visual element on either side of the text, which originally seemed easier in grid.

Now that I’m thinking about it I should perhaps take everything out of the grid except that last part. :slight_smile:

The tribute page is the first page everyone make in FCC, you will have another chances to use Grid.

Before Grid i recommend have deep practice with flex-box first. So you can first practice with flex-box and then use grid.