html - How to move title of header for it to line up with main content of the page? -

i have row columns on main content section , gave width of 1000px , centered margin:0 auto. title of header way left of course , want line right row begin. how can achieve this?

http://jsfiddle.net/zck9c8ud/

<header>     <nav>         <ul>             <h1>title of page</h1>             <a href="#"><li>home</li></a>             <a href="#"><li>portfolio</li></a>             <a href="#"><li>about</li></a>         </ul>     </nav> </header>     <div class="row">     <div class="col">col1</div>     <div class="col">col1</div>     <div class="col">col1</div> </div>   *{ margin:0px; padding:0px;  }  header{  background:orange; color:white; padding:10px; }  header h1{ display:inline; position:relative; left:200px; }    nav ul{ display:inline; }  nav ul li{ display:inline-block; color:white; position:relative; left:70px; }  .row{ width:1000px; margin:0 auto; }  .col{ background:#999; width:33%; float:left; margin:10px; padding:10px; color:white; height:400px; } 

i'm not sure if understood question properly, here's how tried solve it:

tldr: check out fiddle: http://jsfiddle.net/arnellebalane/llzmseoq/

first, wrapped header , row in separate container called .wrapper, gave width of 1000px.

<div class="wrapper">   <h1>title of page</h1>    <div class="row">     <div class="col">col1</div>     <div class="col">col1</div>     <div class="col">col1</div>   </div> </div> 

then changed width of .row 800px , the width of h1 200px (adjust these values if want`.

then floated them separate directions sit beside each other.