UI bug: Black footer at the bottom is sitting on top of main content

What happened:
Current Behavior:
When you scroll down ,the black footer at the bottom is larger than it should be ,also it overlaps the main content when scrooled down like this :

Expected behavior:
-shorter fotoer height
-footer should not overlap main content like this

Proposed Fix:
I have fixed this issue

Files updated : docs/stylesheets/extra.css

@rahulharpal1603 Sir,Please assign this issue to me.I will generate pr to this shortly.