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
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.
Sorry I wasn’t being clear, I’m still new to HTML and CSS
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.
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
