In CSS header issue

Question

Hi :) In my css I'm trying to keep the navigation bar inside the header tag to make styling easier but for some reason the header links are being displayed outside of the header tag over the top of the rest of my site text which makes me think it is not set into the header tag properly?

can you help me work out what I might have structured wrong?

Thanks Adam :)

Link to current version view http://jsfiddle.net/Binnsey/jadd06qm/

HTML

<header class="MainHeader">
    <img src="images/greenenergy.jpg" alt="Green energy logo" width="25%" height="25%" class="logo"/>
    <h1 class="headertext"> My Green Energy</h1>
    <nav>
    <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">My Metre</a></li>
            <li><a href="#">Customer Help</a></li>
            <li><a href="#">Social Media</a></li>
        </ul>
</nav>
</header>

CSS3

body{
    margin: 0 auto;
    width: 70%;
    clear: both;
    height: 100%;
    background-color: #DCDCDC;
    padding-top: 30px ; 
    margin: 0 auto;
    padding-top: 30px ; 
    font-family: 'PT Sans', sans-serif;
    font-size: 100%;
    text-align: left;
    line-height: 1.5;
    padding:8px;
    border-radius: 10px;
    box-shadow: #0AF73A 0px 0px 50px;
    margin-bottom:8px;}

header {
    margin-top: 2% 0;
    background-color: #71B315; 
    padding-bottom: 60px;}

.MainHeader img {
    width: 20%; 
    height: auto;}

.MainHeader {
    padding-top: 20px ;}

.logo {
    display: inline;
    vertical-align:middle}

#menu .MainHeader nav a:hover, .MainHeader nav a:active
#menu .MainHeader nav .active a:link, .Mainheader nav .active a:visited {
    text-shadow: none;}

#menu .MainHeader nav {
    border-radius: 5px;
    -webkit-border-radius: 5px;}

.MainFooter { 
    background-color:#3D3D3D;
    color:black;
    clear:both;
    text-align:center;
    padding-bottom:10px;
    padding-top:10px}   

.headertext {
    display: inline;}

.MainFooter a {
    color: #FFFFFF;
    text-decoration: none;}

#headertext  header {font-size:50%;}

#menu nav li{display:inline-block;}

/*Strip the ul of padding and list styling*/
#menu ul {
    list-style-type:none;
    margin:0 auto;
    padding:0;
    position: absolute;}

/*Create a horizontal list with spacing*/
#menu li {
    display:inline-block;
    float: left;
    margin-right: 1px;
    padding: 5px 0px;}

/*Style for menu links*/
#menu li a {
    display:block;
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    background: #2f3036;
    text-decoration: none;
}

/*Hover state for top level links*/
#menu li:hover a {
    background: #19c589;}

/*Hover state for dropdown links*/
#menu li:hover ul a:hover {
    background: #19c589;
    color: #fff;}

/*Prevent text wrapping*/
#menu li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;}

Answer 1

Applying a clearfix to your header element also looks like it'll achieve what you're asking.

/* clearfix */
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

CodePen Link: http://codepen.io/ryanburnette/pen/bc6a625d46feae7904e86cb7c70b7a56

Answer 2

Just comment out the float:left line in the #menu li style as shown below

#menu li {
    display:inline-block;
    /*float: left;*/
    margin-right: 1px;
    padding: 5px 0px;
}

Elements of type float do not come into the document flow and thus will not be contained in the parent container unless the parent container is given height equal to the height of the child element. In this case #menu li is a float element and thus flowing out of the <header>

Fiddle Link: http://jsfiddle.net/8d9bq57L/