Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:

Hi, I’m trying to add borders around each main section but the bottom borders are overlapping with top borders, so I changed border-bottom value to 0px but it doesn’t work for the first section. It leaves a gap between the first and section main section.

Does it have something to do with the ordered list element in the first section? But it’s inside the main section so I think it shouldn’t be the problem.

Your code so far

`
WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

Hello!

In your CSS, give the main-section with the id introduction

overflow-y: hidden;

The list produces some overflow on the y-axis.

If you want to close the bottom, give the main-section with the id viewport a border-bottom and everything is in a nice box!

1 Like

Hi!

Thank you for replying, I solved the problem with the gap but I’m wondering why overflow-y:hidden; works. I know you explained that the list produces some overflow on the y-axis, but isn’t my problem on the x-axis…? (overlapping horizontally instead of vertically)

Also, I’m trying to close off the bottom with the id viewport but since I have set the bottom border to 0px for main sections, the main section with the id viewport doesn’t close off.

Not sure what you meant with the boxes overlapping.
The borders? you can solve this with giving them some bottom margin.

Or do they stack on one another?

Sorry I wasn’t being clear, I’m still new to HTML and CSS :sweat_smile:

But I understand your solution now, I was too focused on the bottom border and I forgot the problem was the borders on the left and right which is the y-axis, and like you said the list produces some overflow on the y-axis, so it makes perfect sense why I should hide the overflow on y-axis.

However, I still don’t know how to close off the bottom border of the main section with the id viewport since I set border-bottom to 0px for all main section. I tried giving viewport section borders by writing the code separately but still doesn’t work.

address the id directly, it worked for me

#viewport {
border-bottom: 3px black solid;
}

Another solution for your problem with the gap would be to set margin to 0 on global


* {
margin: 0;
}

on the top of your CSS will remove all default margins and you can costumize them.

One final tip: You get the error message in Codepen because youu added a head in the HTML. You just need the HTML body in codepen, everything else runs under the hood there

Thank you so much with the help! I really appreciate it!