So in the Display & Positioning lesson we learn that you can fix the header element to the top of the page with position: fixed; width: 100%; z-index: 1; and then by making the next element position: relative; top: [height-of-header-element];. This means the relative element appears at the bottom of the fixed element and then scrolls under it.
What I have noticed from making my own project is that the relative element really does scroll under it, even though it is not visible, meaning that inline hrefs are now useless, as they potentially point to things behind the header element.
So my question is how can you make the main element start after a fixed header element, so that it doesn’t scroll under it, but starts scrolling only from the boundary?