I thought using the flex/flex-direction could align my h2 title for my tribute page with the image for it. But, I can’t seem to get them to line up. Any suggestions on how to correct this? I tried using width and height percentages, thinking that would do something, but it doesn’t. My title is on the right-side margin, using flex. But, I can’t get it to align vertically.
You don’t need the flex-direction property if you’re only using it on the h2 element. It’s used more if you have multiple elements inside of a flex-container to control the direction they will flow when the container size changes.
If you delete that property the h2 text will automatically align to the left side. Then you can use justify-content to align the text where you want in the container.
Also, in codepen, you put all of the CSS in the CSS box. Only the HTML goes in the HTML box, the CSS in the CSS box etc, so you should move everything inside of style into the CSS box.
Some other things to note: In your HTML, in your img and figcaption elements you have an extra " after your id that is causing problems. Also the figcaption element is only permitted to be used inside of a figure container.
When I move the style elements over to the CSS window, all the visual changes to the elements go away. So, I’m going to keep that in the HTML window.
Using the justify-content doesn’t align anything. I don’t understand how to use that for aligning my image and the title. I used justify-content: left; for the image and justify-content: right; for the title. And that does nothing.
I am new too and bewildered even when I do something that works. I just wanted to say I like your composition. Everything to the left instead of boring symmetry. You will figure it out.