html - HTML/CSS padding issue

Question

So this is what I'm doing: jsfiddle code

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
header, nav, section, article, aside, footer {
    display: block;
}
body {
    font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
    width: 100%;
    height: 100%;
}
a {
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
#wrapper {
    width: 1000px;
    margin: 0 auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
.menu {
    background-color: #c00e0e;
    opacity: 0.5;
    filter: Alpha(opacity=50);
    /* IE8 and earlier */
    clear: both;
    margin: 0 auto;
    width: 730px;
    text-align: center;
    color: #FFF;
    border-radius: 5px;
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.4);
}
.menu ul {
    list-style: none;
    margin: auto;
    display: block;
}
.menu ul li {
    display: inline-block;
    width: auto;
    height: 42px;
    padding: 0;
    font-family:'Chela One', cursive, Helvetica, sans-serif;
    font-size: 20px;
}
.menu ul li a {
    height: 42px;
    width: auto;
    float: left;
    text-decoration: none;
    padding: 0 0 0 25px;
    margin: 0px 10px 0px 10px;
    color: #fff;
    text-align: center;
}
.menu ul li a:hover {
    height:42px;
    width: auto;
    text-decoration: none;
    color: #000000;
}
.menu ul li a.current {
    height: 42px;
    width: auto;
    float: left;
    text-decoration: none;
    padding: 0px;
    color: #fff;
}
/* Header------------------------------------------*/
#header {
    height: 291px;
    background: #FFE680 url('http://i43.tinypic.com/2ivb7mh.png') no-repeat;
    padding-top: 30px;
}
.big {
    font-family:'Luckiest Guy', cursive;
    font-size: 50px;
    margin: 0px auto;
    padding-top: 50px;
    text-align: center;
    color: #FFF;
}
/* Middle--------------------------------------*/
#content {
    text-align: center;
    margin: auto;
    padding: 0 0 800px;
    background-color: #343436;
}
.footer_misc {
    background-color: #000;
    width: 1000px;
    position: relative;
    margin: 0 auto;
    text-align: center;
    color: #FFF;
    height: 50px;
}
/* Footer-------------------------------------------------------*/
#footer {
    width: 1000px;
    margin: -100px auto 0;
    height: 100px;
    background: #b40b0b;
    position: relative;
}
/* tell the imgwithtxt's children to float left: */
.imgwithtxt > * {
    float:left;
    margin-right:5px;
}
/* this is called a clearfix. it makes sure that the imgwithtxt's children floats are cleared, without using extra markup */
.imgwithtxt {
    *zoom:1
    /* for IE */
}
.imgwithtxt:before, .imgwithtxt:after {
    content:" ";
    display: table;
}
.imgwithtxt:after {
    clear: both;
}
/* end clearfix*/
#title {
    text-align:center;
    font-size: 20px;
    color: #FFF;
    margin: 10px auto;
    font-family:'Luckiest Guy', cursive;
}
.columns {
    width: 1000px;
    text-align: center;
    margin: 0 auto;
    padding: 0 auto;
}
.col1 {
    float: left;
    width: 200px;
}
.col2 {
    float: left;
    width: 200px;
}
.col3 {
    float: left;
    width: 200px;
}

When you run the code, it's getting a yellow background before the content. What should I miss in my css? I just want my menu box to have a padding so it won't be on top. I've tried to fix the issue to no avail. I would gladly appreciate your help. Thanks.

Answer 1

Is this what you mean, eliminating the background color of the header, because that is set to yellow. Fiddle below.

http://jsfiddle.net/BAKjU/4/

background color:#333;

Answer 2

Just add a line-height property to .menu ul li a

http://jsfiddle.net/weissman258/BAKjU/1/

Answer 3

You have to add line height below li then your nave will show correctly. Fiddle Link here.

.menu ul li {
    display: inline-block;
    font-family: 'Chela One',cursive,Helvetica,sans-serif;
    font-size: 20px;
    height: 42px;
    padding: 0;
    width: auto;
    line-height: 42px;
}

and if you want to remove yellow background then you can remove it from below css and add as per your appropriate color. Here background color is set to yellow that's why it is showing yellow. Now I have changed the background color.

#header {
    background: url("../img/header3.png") no-repeat scroll 0 0 #343436;
    height: 291px;
    padding-top: 30px;
}