Extra space, can't figure out why - SOLVED

I’m working on the personal portfolio project, and you can see that there’s space between the purple header and the Intro paragraph. I don’t know where that’s coming from.

Besides that, I welcome any other tips you want to throw at me!


It’s because your intro and your photo-div are displayed as inline-block. This is the default behaviour when they are next to each other. You’ll have to use vertical-align: top to your #intro in order to put it in the top of the container.

Thanks a million man! Now, if I want to instead bring down the photo so that the top of it aligns with the top of the intro, is using margins my only option? Or can I do it with alignment?

Yes, since you push your intro down by margin-top: 50px you’ll have to do the same with your picture. Or you could have used padding-top: 50px in your #hr-1 to push both of the children down.

1 Like