Main Padding Help

Programming HTML-CSS
1

I’ve been stuck on the main padding portion and can’t figure it out. I feel like it’s a really simple code but can’t get it. Not sure if I’m doing the right Google search.

Step 48

When the screen width is small, the h1 does not wrap its text content how it should. Align the text for the h1 element in the center.

Then, give the main padding such that the Student Info section header can be fully seen.

Your code so far:
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
text-align: center;
}

**Your browser information:**

User Agent is: <code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36</code>

**Challenge:**  Step 48

**Link to the challenge:**
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-48
2

You’ll need to add a new block below the h1 block, select main and set its padding-top.

3

can you clarify by select main? tried google searching this but am lost. if i put the below, the Student Info text shows but not sure why it would be h1 when it’s a different text?

h2 {
padding-top: 50px;
}

4

main is an HTML tag, just like h1 is.

h2 {
  padding-top: 50px;
}

This selects h2 tags, and gives them a top padding of 50px.

You need to select main tags, and give them a top padding of 50px.

5

oh my gosh. i feel so stupid right now. duhh. i was thinking way too hard. thank you!!!

6

im stuck on the same step, i read your reply but cant get it, still. can you elaborate on this on please!

7

What have you tried so far?

8

sjp you should make a main selector under the h1 and then the top padding with X px so that Student Info becomes visible again. Try it!