Example Copy Template

Hope this helps

by Imogen Hallett

HTML

<header>
  <div class="left">
    <div class="logo"> <img src="http://livedemo00.template-help.com/wordpress_51347/wp-content/themes/theme51347/images/logo.png">
      <h1>Replace with logo &amp; words</h1>
    </div>
  </div>
  <div class="right">
    <div class="socialbuttons">
      <div class="button"><img src="http://livedemo00.template-help.com/wordpress_51347/wp-content/themes/theme51347/images/icons/facebook.png"></div>
      <div class="button"><img src="http://livedemo00.template-help.com/wordpress_51347/wp-content/themes/theme51347/images/icons/twitter.png"></div>
      <div class="button"><img src="http://livedemo00.template-help.com/wordpress_51347/wp-content/themes/theme51347/images/icons/feed.png"></div>
      <div class="button"><img src="http://livedemo00.template-help.com/wordpress_51347/wp-content/themes/theme51347/images/icons/google.png"></div>
    </div>
  </div>
</header>
<nav>
  <ul>
    <li>ABOUT US</li>
    <li>GALLERY</li>
    <li>EVENTS</li>
    <li>BLOG</li>
    <li>CONTACTS</li>
  </ul>
</nav>

CSS

body {
	background-color: #ccc;
	margin: 0;
	padding: 30px 0 0 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}
header {
	width: 100%;
	padding: 10px;
}
.left, .right {
	display: inline-block;
	width: 50%;
	vertical-align: middle;
}
.right {
	text-align: right;
	margin-left: -4px;/*you need this to adjust for inline-blocks*/
}
.logo {
	display: inline-table;
	width: 387px;
	height: 60px;
}
.logo h1 {
	margin: -20px 0 0 75px;
	font-size: 14px;
	color: #fff;
	font-family: sans-serif;
}
.socialbuttons {
	display: inline-table;
	border-collapse: separate;
	border-spacing: 10px 0;
}
.button {
	display: table-cell;
	width: 40px;
	height: 40px;
	vertical-align: middle;
	background-color: #000;
	border-radius: 100%;
	box-shadow: 5px 2px 5px #888888;
}
.button:hover {
	background-color: #c00;
}
.socialbuttons img {
	display: block;
	margin: 0 auto;
}
nav {
	width: 90%;
	margin: 40px auto 0 auto;
	list-style: none;
	background-color: rgba(204,60,62,1.00);
	font-family: sans-serif;
  font-size:14px;
}
nav ul {
	width: 60%;
	list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
	padding: 0;
}
nav ul li {
	display: inline-block;
	width: 20%;
	padding: 0;
	margin: 0 0 0 -5px;/*you need this to adjust for inline blocks and the 1px border*/
	text-align: center;
	line-height: 70px;
	border-right: 1px solid rgba(178,24,27,1.00);
	color: #fff;
}
nav ul li:first-of-type {/*we don't want to adjust the first one*/
	margin: 0;
}
nav ul li:hover {
	background-color: #c00;
}