HTML element appear outside wrapper element using div's - css

Question

I am working on visual studio express 2013 and create a default project based on webform with default template as shown in link http://codepen.io/anon/pen/dPWzRd
For some reason Header & footer elements appear our their main wrapper as it is show in the codepen example. I tried to play around with few css properties but it breaks the design.
<header>
<div class="header-wrapper">
<div class="float-left">
<p class="site-title"> logo here</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Test</li>
</ul>
</nav>
</div>
</div>
</header>
How can ii fix this so that Logo and menu items show inside the Header Wrapper (basically inside the red box) and same for the footer section

Answer 1

You can just use in CSS
display: inline-block;
instead of
float: left;
Full example:
.float-left {
display: inline-block;
}
It's because style float makes element "invisible" for parent. Style display: inline-block acts similar to float but is "visible".

Answer 2

when you have to element inside in other div and two div's are floating after that you need to add clear.
forked example
http://codepen.io/anon/pen/mymMMz
<header>
<div class="header-wrapper">
<div class="float-left">
<p class="site-title"> logo here</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Test</li>
</ul>
</nav>
</div>
<div class="clear"></div>
</div>
</header>
.clear {
clear: both;
}
or add overflow hidden to .header-wrapper