The whole page is shorthand for my own use to answer one of the FCC coding projects. I’ll be happy to expand on the last (most general) solution. First things first, take a look at the box model in CSS - how padding, margin, and border work. Next, look at the code I proffered as a solution:
border-top: 116px solid transparent;
Third, read the explanation of the code:
border-top only applies a border to the top edge of the item with class
nav-target. When we make it
transparent, it means that the border will be colorless, so even if it overlaps the previous element, you’ll see the element that precedes it in its entirety.
margin-top: by setting this negative, instead of forcing space between adjacent HTML elements, we actually cause them to overlap. Normally, by setting
margin-top negative, later
.wells like your “About Me” section would cover up the bottom of your “Welcome” section. However, because the part of the “Welcome” that overlaps the “About” section is a 116px high top-side transparent border, we see the entirety of the about section. I chose 116px because that’s the height of your navbar per Firefox’s developer tools (116.25px).
background-clip lets us set how far out in the Box Model we want our backgrounds to extend. Basically, this will make sure that the browser doesn’t render any color under your transparent top border.
Finally*, and this is the clever bit: when the browser scrolls to the well with the appropriate id, it targets the whole CSS box, which means that it aligns the top border of the element with the top of the viewport, not the content. So, the transparent border gets tucked up under your navbar and your user gets a seamless experience.
Another (smaller) problem I see is that the ids you are targeting with your scrolling are heading elements, not the actual div’s with the class
.well. Just move the id to the respective wells, and it should work.