Footer overlapping Main

I am working on the Product Landing Page project. I have it looking how I want other than the footer is overlapping part of the main body.

here is the codepen page for what I am talking about:

I have tried adding a footer {position:fixed} to my stylesheet and it makes the footer disappear completely. {position:absolute} has it on the left side inline with section above it. If I remove footer {position:x} from the stylesheet it just floats to the right of the section above it but my horizontal rule goes across the entire page.


That’s because you limited the height of the .container element inside the main, which puts part of the element behind the footer:

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    margin: auto;
    height: 100px; /* this line causes the problem */

Thank you that fixed it

1 Like