Overflow logo outside nav bar - html

Question

I've tried the overflow-y: visible in css but the logo still cuts, i imagine it has something to do with the body since, in all the other pages the logo shows as i want it to.
<div class="nav-logo">
<img class="lightup-logo" src="image/logo.png" alt=""/>
</div>
.nav-logo {
float: left;
overflow-y: visible;
width: 24%;
padding: 0px;
margin: 0px;
}
On a side note the logo works as intended in all other pages, it overflows nicely, its just in the index page that the problem seems to appear.
For those who are looking for a complete code sample.
<header>
<div class="header-container">
<div class="nav-logo">
<img class="lightup-logo" src="image/logo.png" alt=""/>
</div>
</div>
</header>
<main>
<div class="body-container">
<div class="large-container"></div>
<div class="clear"></div>
</div>
</main>
header {
padding: 0px;
margin: 0px;
background: rgba(31,34,36,1);
background: -moz-linear-gradient(left, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(31,34,36,1)), color-stop(25%, rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,1)), color-stop(77%, rgba(0,0,0,1)), color-stop(100%, rgba(31,34,36,1)));
background: -webkit-linear-gradient(left, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%);
background: -o-linear-gradient(left, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%);
background: -ms-linear-gradient(left, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%);
background: linear-gradient(to right, rgba(31,34,36,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 77%, rgba(31,34,36,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f2224', endColorstr='#1f2224', GradientType=1 );
}
.nav-logo {
float: left;
overflow-y: visible;
width: 230px;
height: 100%;
width: 24%;
padding: 0px;
margin: 0px;
}
.header-container {
max-width: 1000px;
margin: auto;
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 1px solid transparent;
-webkit-border-image: url(/border.png) 28 stretch; /* Safari 3.1-5 */
-o-border-image: url(/border.png) 28 stretch; /* Opera 11-12.1 */
border-image: url(/border.png) 28 stretch;
}
main {
margin: 0px;
padding: 0px;
}
.large-container {
height: 478px;
background-image: url(../image/sliced1.png);
}
.body-container {
margin: auto;
max-width: 1000px;
position: relative;
}
If i add z-index: -1 to the body-container i get the result i want (logo overflows) however links in the body-containers no longer work.

Answer 1

screen_styles.css, line 48, remove z-index: 5px;. z-index has nothing to do with pixels.
add these rules to header line 14:
header {
position: relative;
z-index: 99;
}
That's about it. The reason why z-index did not work was because you were trying to use it on a position:static element. It only works on elements with position other than static.
Your project has quite a few errors, you should have a decent front end developer look at it before you launch, to put it mildly.

Answer 2

try
.nav-logo img
{
max-width: 100px; //width of div
max-height: 100px;//height of div
}
or you can make logo.png, background of div
<div class="nav-logo">
</div>
and use
.nav-logo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("image/logo.png");
background-repeat: no-repeat;
background-size: contain;
}
contain makes background image fill the div and not getting bigger.