Top padding does not appear - html

Question

I'm in the middle of designing a WP theme. I've decided to make links in the header as they are in the image. However, I couldn't make the bluish gradient filled area filled with black background (I used that fancy gradient for just pointing the issue). Called charming .current class to make this achieved, it is basically:
.current {background-color: black; color: rgb(242, 245, 238); padding-top: 65px;}
Also image:
I did NOT used CSS-reset, I checked overflow attributes for encapsulating divs of list, nothing worked.
HTML code:
<div id="container" class="">
<div id="header" class="shadow">
<div id="logoContainer">
<span class="helper"></span><img src="img/tdw_logo_serif.png" alt="The Digital Warehouse">
<div id="links">
<ul class="helper">
<li><span class="helper"></span>HOME</li>
<li class="current"><span class="helper"></span>BLOG</li>
<li><span class="helper"></span>PORTFOLIO</li>
<li><span class="helper"></span>CONTACT</li>
</ul>
</div>
</div>
</div>
...
</div>
CSS code:
#container {
}
#header {
top: 0;
left: 0;
right: 0;
height: 35px;
overflow: visible;
background-color: rgb(242, 245, 238);
color: rgba(5, 0, 18, 1.00);
z-index: 100;
} .willStick {
position: absolute;
padding-top: 65px;
} .didStick {
position: fixed;
padding-top: 0;
}
#logoContainer {
position: relative;
height: 35px;
padding-left: 60px;
padding-right: 60px;
width: 900px;
margin: auto;
overflow: visible;
}
#logoContainer img {
margin: 0;
padding: 0;
height: 35px;
vertical-align: middle;
display: inline-block;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#links {
position: relative;
float:right;
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
height: 35px;
overflow: visible;
}
#links ul {
margin: 0;
padding: 0;
display: inline-block;
font-size: 0.7em;
font-weight: 800;
font-family: "jaf-bernino-sans-condensed", "proxima-nova", sans-serif;
text-transform: uppercase;
list-style-type: none;
overflow: visible;
}
#links li {
width: 90px;
height: 35px;
border: 0;
margin: 0;
padding: 0;
display: inline-block;
float: left;
text-align: center;
overflow: visible;
}
Any help will be appreciated.

Answer 1

This appears to be a specificity issue - try
#links li.current etc.
#container {
}
#header {
top: 0;
left: 0;
right: 0;
height: 35px;
overflow: visible;
background-color: rgb(242, 245, 238);
color: rgba(5, 0, 18, 1.00);
z-index: 100;
} .willStick {
position: absolute;
padding-top: 65px;
} .didStick {
position: fixed;
padding-top: 0;
}
#logoContainer {
position: relative;
height: 35px;
padding-left: 60px;
padding-right: 60px;
width: 900px;
margin: auto;
overflow: visible;
}
#logoContainer img {
margin: 0;
padding: 0;
height: 35px;
vertical-align: middle;
display: inline-block;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#links {
position: relative;
/*float:right;*/
display: inline-block;
vertical-align: bottom;
margin: 0;
padding: 0;
height: 35px;
overflow: visible;
}
#links ul {
margin: 0;
padding: 0;
display: inline-block;
font-size: 0.7em;
font-weight: 800;
font-family: "jaf-bernino-sans-condensed", "proxima-nova", sans-serif;
text-transform: uppercase;
list-style-type: none;
overflow: visible;
}
#links li {
width: 90px;
height: 35px;
border: 0;
margin: 0;
padding: 0;
display: inline-block;
float: left;
text-align: center;
overflow: visible;
}
#links li.current {background-color: black; color: rgb(242, 245, 238); padding-top: 65px;}
<div id="container" class="">
<div id="header" class="shadow">
<div id="logoContainer">
<span class="helper"></span>
<div id="links">
<ul class="helper">
<li><span class="helper"></span>HOME</li>
<li class="current"><span class="helper"></span>BLOG</li>
<li><span class="helper"></span>PORTFOLIO</li>
<li><span class="helper"></span>CONTACT</li>
</ul>
</div>
</div>
</div>
</div>