top: -175 leaves HUGE space at the bottom of the page

[xProteuSx]

I am trying to customize a bootstrap template, and I am having a massive problem which has me pulling my hair out.

 

Here is the project, in the worx:

 

https://www.haupysbeaverrub.ca/newest/index.html

 

In the CSS file:

 

https://www.haupysbeaverrub.ca/newest/css/beaverrub.css

 

... on line 89 I have the following:

 

.beaverhomeheader
{
position: relative;
top: -225px;
z-index: 8;
}

This is because the logo is larger than the navigation bar, so I've used zindex to float it in front of the image rotator at the top of the page.  So, I've had to move things around, and this top: -225px has caused all kinds of havoc.

 

So now when you scroll to the bottom of the page, there is a huge blank space (225px of nothingness).

 

Also, when you resize the window to reflect a smartphone resolution, there is an additional blank space below "What is Haupy's Beaver Rub Spice?".  There is also something "funny" that happens near the minimized navigation in this state:  a small yellow rectangle with 2 rounded corners appears near the menu widget, and it has a shopping cart and the value $55 within.  I don't know how to get rid of this either.

 

Please help oh fantastical people of PHPFreaks!  Thank you in advance.

 

[xProteuSx]

Please help ... I've spent 6 hours trying to fix this, with nothing to show for it  

[maxxd]

Try changing 'top:' to 'margin-top:' and see if that fixes your issue.