Two problems: White Bar at top and Blue Squares in Flexbox

Hi, I’m having two html/ css problems with my tribute page:

https://codepen.io/jesswein/pen/XWawMqW

I’ve searched for answers but so far haven’t found any that solve them.

  1. There is a white bar at the top of my webpage that I cannot seem to get rid of. Troubleshooting solutions from forums advice makes it disappear, but it always reappears in codepan upon refresh.

  2. I have three flexboxes, each with an image next to text. Especially at medium screen sizes, under the images there is a box that takes on the color of the “#main” I made main background bright blue so the problem would stand out. How can I get this area under the photos to be the same as each background color in the flexbox? What is causing it to act separately if it’s in the box?

Thanks for the help. This is my first time using html and css, so feel free explain the basics and please be kind.

Thank you!

  1. Look closely at the upper left of your page in the white bar. Do you see something there? That should give you a hint as to what’s causing it.

  2. Why do you have height: fit-content on the div wrapping the third image?

1 Like

you have code buried within your code. what’s causing the white at the top is there’s a comment nested within a comment and that’s not allowed.
Notice the "> in the white part?

Thank you! Removing “height: fit-content” removed the dreaded blue area. Now I need to research why. A lot of what I’m doing is trial and error, so I can’t quite tell you why I put “fit-content” there. I think I was trying to make the images stretch to fit to the bottom of the container instead of whatever default bottom margin is under each image.

As for the "> You’re right That’s got to be relevant. I vaguely remember googling and fixing this error once before, but I don’t remember how, or why it has returned.

Thanks. I’ll keep trying to find the nested comment