0

This is the site link. The footer is the bootstrap's .well. It has some default margin-bottom you can see that with inspect element option. Now I have tried everything that I knew to remove the margin bottom ( Except editing the original bootstrap file I don't think I would need to do that ). For example: 

footer.well { margin-bottom: 0px !important; }

I've also tried doing inline css but no use. Can anyone help me?
Note: If I remove the margin with the inspect element tool, it gives me the exact result I want.

Faiz Ahmed
  • 1,083
  • 8
  • 16
  • Awesome really guys thank you very much. All of you but I can accept only one answer – Faiz Ahmed Jul 28 '14 at 09:14
  • Checkout my answer here, It might help you. Here is the link, [enter link description here](https://stackoverflow.com/a/65075323/12155745) – Jwala Kumar Nov 30 '20 at 14:29
  • Checkout my answer, It might help you. here is the link, [enter link description here](https://stackoverflow.com/a/65075323/12155745) – Jwala Kumar Nov 30 '20 at 14:31

3 Answers3

3

One of parent divs have relative position and "top: -30px;" defined, if you remove that all comes to order

This is the line: 

<div style="position: relative; top: -30px;" class="nav_wrapper padding">

Just redefine this to top: 0; and there you have it. Rest of padding is footer actual padding which you can remove with:

footer.well { margin-bottom: 0px !important; }
Dino
  • 401
  • 4
  • 17
2

You need to do there changes to fix this.

1) Indeed remove the bottom margin AND the 1px bottom border:

footer.well {
    margin-bottom: 0px;
    border-bottom: none;
}

No need for !important here though

2) The element will still be shifted to the top because its parent element forces it to do so. Cancel that rule by removing it. Change:

<div style="position: relative; top: -30px;" class="nav_wrapper padding">

to simply

<div class="nav_wrapper padding">

3) Once removed at the top there will be a 30x gap because you just recreated it to clear the bottom. Here is a much cleaner way to recreate it without modifying the bottom:

#header {
    margin-bottom: 30px;
}

All CSS rules must be declared after the bootstrap CSS file rules. Preferably from another file loaded after.

Valentin Mercier
  • 5,256
  • 3
  • 26
  • 50
1

Adding margin-bottom: 0px; to footer.footer-home within custom.css should solve your problem.

Daniel
  • 3,541
  • 3
  • 33
  • 46