Я вот так сделал.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<title>Faizan Haider</title>
</head>
<body>
<div class="wrapper cf">
<div class="logo">
<img src="http://placehold.it/140x100">
</div>
</div>
<div class="pageWrapper">
<div class="wrapper">
<nav>
<ul>
<li>Home</li>
<li>Ideas</li>
<li>Tutorials</li>
<li>Blogs</li>
</ul>
</nav>
<div class="search">
<form action="#">
<input type="search" placeholder="search...">
<button>GO</button>
</form>
</div>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
.cf:after {
content: " ";
display: table;
clear: both;
}
.cf {
zoom: 1;
}
body {
font: normal normal normal 12px Tahoma, sans-serif ;
}
.wrapper {
max-width: 980px;
margin: 0 auto;
}
.pageWrapper {
width: 100%;
height: 100px;
border: 1px solid #C2C2C2;
background-color: #eee;
}
/*HEADER CSS ----------------------------------------------*/
.logo {
margin-top: 20px;
}
nav {
float: left;
width: 65%;
}
.search {
float: right;
width: 35%;
}
nav ul {
margin-top: -1px;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: -5px;
border: 1px solid #C2C2C2;
height: 100px;
font-size: 22px;
font-weight: bold;
padding: 10px 20px 0px 20px;
}
form {
margin-top: 35px;
float: right;
}