Portfolio Project help. How can I make the background color of each section extend from the top of one section to the bottom of the next section?

https://codepen.io/kaija-montaine/pen/VBwwNY

the problem isn’t the background, but the placement of the ‘top’ div

see this picture showing what I saw when I inspected your div

your div ‘top’ is starting from a point that is higher than what is visible (it starts underneath the header menu).
That’s why there is a gap between it and the next section.

You seem to be using a lot of different stylesheets. I’m not familiar with what they contain, or how they affect your page so I can’t offer any advice.
The brute-force method of forcing your section down is to set its position to relative and then move the ‘top’ setting to some number of pixels that equals the amount of the displacement. But this method may not work for every screen width/height.

Perhaps go back and try to understand how the stylesheets you are importing should be used, as you might be misusing them in some way.

Oh thank you! I took away the style sheet and the “top” div and it’s still not working. Do you have any other suggestions?

yes, now you have space between the contact section and the portfolio section and that is because the contact section has a margin or padding setup. set the top margin & padding to 0 to get rid of that.

Edit: putting margin to 0 in the contact section should be enough…

Thank you so much! Super helpful.

1 Like