Padding Bottom does not work [closed]

This happens because you are adding position:absolute; to div main that contains the list ( #source ), when this is not necessary to be implemented.

Since you are already adding position:fixed; to #top-bar and .large-contact-sheet , which are the top and bottom navigation bars, you avoid adding position:absolute; to #source which is the main content, because this property is not required and is not there to do anything along with other properties that have been added because of this property.

Clearing unnecessary styles implemented in #source , here's how the code will look:

#source {
    margin-bottom: 50px;
    /* Ou padding-bottom: 50px; se preferires */
}

You will only need this property in the #source which is to compensate for the height size applied to the class .large-contact-sheet which is height:50px; .

Since we are on the wave, I also suggest you remove other properties of the class .large-contact-sheet which are unnecessary, especially the overflows , because this is the reason why the unwanted scroll bars are appearing at the bottom of the page < br> With the unnecessary code removed it looks like this:

.large-contact-sheet {
    height: 50px;
    width: 100%;
    background-color: #900;
    text-align: center;
    white-space: nowrap;
    display: block;
    position: fixed;
    z-index: 5;
    bottom: 0;
}

Rafael, use the overflow-x: hidden; property to take the bottom scroll, and for the element being capped, put a margin-bottom only in the last element.