two columns, left-right

hi. i'm getting started on web design , can't figure out.

i'm trying set header 100% width, logo taking 50% of space on left , nav element taking 50% of space on right.

when load site though nav stacks on logo, both on left. of css below.

#wrap {
width: 100%;
max-width: 1192px;
min-width: 755px;
margin: 0 auto;
padding: 5px;
overflow: hidden;
position: relative;
}

#header {
height: 182px;
background-color: #ffffff;
padding-top: 18px;
border-bottom: solid;
border-width: 1px;
border-color: #c7c7c7;
}

#site-logo {
display: block;
position: absolute;
float: left;
width: 50%;
}

#main-nav {
display: block;
position: absolute;
float: right;
width: 50%;
}

idea i'm doing wrong?

help.

 

have tried defining width #header?

 

Forums Special Interests Web Design and Development

• iPhone
• Mac OS & System Software
• iPad
• Apple Watch
• Notebooks
• iTunes
• Apple ID
• iCloud
• Desktop Computers
• Apple Music
• Professional Applications
• iPod
• iWork
• Apple TV
• iLife
• Wireless