Responsive Web Design Projects-Build a Survey Form

Curriculum Help
,
1

Hey, I just want to thank whoever looks at this in advance for helping me address this issue because I’ve been staring at it for the past couple hours trying to find a fix :man_facepalming:t4:

So, when doing these projects I usually copy and paste the instructions into the top of Codepen’s HTML editor before and then comment it out. When doing this I accidentally made an error where instead of using :<!-- --> tags I input .<!-- -->

However, this extra period before my comment tag is allowing the “margin: 0 ;” command that I input into my body element to function as intended:

Screen Shot 2022-09-09 at 4.27.19 PM
Screen Shot 2022-09-09 at 4.27.19 PM1920×1023 102 KB

Whenever, I take this period away it looks like this:

Screen Shot 2022-09-09 at 4.03.35 PM
Screen Shot 2022-09-09 at 4.03.35 PM1920×1017 101 KB

Below, I will copy and paste the URL for the project on Codepen since I think it’s easier to look at than inputting code blocks. But if whoever’s looking at this would prefer the code blocks format. Please let me know! Thanks again!

FreeCodeCamp Survey Form Codepen

2

I could not recreate that screenshot, it’s working fine for me.

3

What do you mean by that? Do you mean you couldn’t recreate the second screenshot where there is empty space using between the header and the webpage using my code ?

4

Yes, no errors for me. windows 10, chrome browser.

5

Wait, I didn’t see that at first, let me check

6

Aye, thanks I appreciate it :slight_smile:

7

I don’t know why the ‘.’ at the start makes it function, but anyway I found the “problem”:

.container {
  width: 100%;
  margin: 3.125rem auto 0 auto;
}

Your div which contains the header, has the class container, and you have a top margin on that class. Remove it or make a new class if it’s used elsewhere.

.container {
  width: 100%;
  margin: 0 auto 0 auto;
}
8

That did it. Thanks so much!