Personal Portfolio - Height of welcome section, other issues

I’m looking for some help with having the height of my welcome section be 100% of the viewport. I originally tried setting it to 100%, and that made it the right size visually, but did not pass the test on the program. I looked at the forum and saw a suggestion to use the vh property, and basically the same thing happened. (Since writing this, I’ve toyed around with the CSS a little bit and now the welcome section isn’t even visually the right size)
I’ve also had trouble getting test 4 and 5 to pass. I have an element with a class of “project-title” in my projects section (test 4), and a link to a project in my projects section (test 5). But it doesn’t seem to satisfy the tests. (While doing the aforementioned toying around, I had test 5 satisfied but then it went back to failing and I’m not sure what happened)
I also consistently have problems getting margins around different elements to be zero. I feel like I’m doing the right thing and it’s just not working. Right now I have white spaces before and after my section elements and I just don’t understand why.
Here’s the link to my pen.

try using the inspector (right-click -> inspect): yuo have 20px of padding that makes it not equal the viewport. remove the padding, and you will pass that test

shouldn’t it be .project-tile? (without the t)

Use the vh unit instead of % for the height (Viewport-percentage lengths).

You were right about the tile/title thing. Cannot believe I missed that. I do have the 20px of padding at the top of my header. When I take it out, it
a) still doesn’t pass the test
b) results in a little white space between the top of the element

You have the default margin on the <h1>. That is the white space you see when removing the padding. You can just remove the top-margin on the h1

h1 {
  padding-top: 40px;
  margin-top: 0;
}

Edit: You may not want to set that style for all h1 elements.

You can give the h1 a class:

.welcome-section-header {
...all the header styles
}

Or you can scope the selector to the h1 inside the welcome-section:

#welcome-section h1 {
...all the header styles
}

with 100vh height and removing the padding it passed to me
it was the only thing I changed yesterday when I tried

1 Like

Thank you so much, I had to remove padding from underneath the H1 element as well and it worked.