'Can I get rid of the blank spaces on top and bottom of my page? [closed]

I have a white space on bottom of this page (Learndash lesson page): https://academiademeditacion.com/lecciones/introduccion-y-postura-de-meditacion/

It does not happen with the other posts or pages in the website. I have tried the following CSS and nothing appears to work. I do not find the problem. I did solve the top blank space though.

    .container {
        height: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        max-width: 100000px !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    #page-container {
        height: 100% !important;
        max-height: 100% !important;
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

.ld-tabs {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

Thank you for your time.

Delco

htmlcss


Solution 1:[1]

If you follow the tree of your DOM, you'll discover that one of the elements has margin set to 1em by this rule:

.learndash-wrapper .ld-course-status.ld-course-status-not-enrolled {
    display: flex;
    background: #f0f3f6;
    padding: 1em 0;
    margin: 1em 0;
    border-radius: 6px;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 vanowm

Related Questions